Anda dapat membuat 'back to top' atau kembali keatas halaman yang dapat bergerak secara 'smooth' (tidak loncat) dengan menggunakan fasilitas javascript jQuery dan smoothscroll. Back to top dengan dengan effect dari jQuery dapat anda lihat hasilnya di blog dukumentasi ini dan jQuery in Blogger Template, jQuery in Blogger Template II.
Tahapan Pembuatan Back to Top - Jquery
1. Buka Edit HTML
2. Masukan script jquery berikut diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
3. Masukan juga kode javascript berikut dibawah script jQuery tadi:
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scrolltop -->
4. cari kode
<body> dan ubah menjadi <body id='top'>5. Masukkan kode
HTML berikut sebelum </body><div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>
:: catatan:
- 'id=top' atau '#top' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah gambar image dan posisinya sesuai selera anda.
6. klik save tamplate, selesai.
Source : http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html
Berkunjung menjalin relasi dan mencari ilmu yang bermanfaat.
BalasHapusSukses yach ^_^