Cara membuat "Scroll to Top" button dgn gne Jquery
Posted: December 23, 2010 by b0an in Labels: tutorialSalam..kebanyakan korang dah tau tentang bende nie dimane dia amat bergune kepada mereka-mereka yang ade blog yang panjang giler babis...hehe..so arinie aku nak share gan korang cara2 wat bende nie yang dimana korang leh nampak kat blog aku nie....code nie aku jumpe kat tenet...tpi dalam bahase org putih ar...bagi memudahkan korang...aku tolong traslatekan untuk korang(kes bosan).....korang ikut jew step yang aku tunjukan kat bawah nie ok......
1.korang login sebagai blogger..msuk ke tag Design..kemudian tekan Edit HTML...Kemudian korang copy dan paste kan code kat bawah nie SEBELUM </body>
<a href='#' id='toTop'><img src='picture?t=1292762029' style='border:0;'/></a>
Note:
- cara paling mudah nak cari </body> ialah dengn cara korang tekan (Ctrl+F) kemudian taip </body>
- picture tue korang kene masukkan URL bagi imej yang korang nak gne.
2. tambahkan CSS code nie SEBELUM tag ]]></b:skin>
/* to top */
#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
3.last step korang kne tambah Jquery Script nie SEBELUM tag
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Kendian korang boleh ar Save dan tengok hasilnye....
nie aku nye button..camne stylo x?hehe
nanti aku try buat