Back To Top Dengan jQuery
Sebetulnya sudah banyak blogger yang membahas masalah ini, namun kebanyakan masih menggunakan '#' sebagai tujuan untuk menggapai top page sehingga terkesan meloncat. Kalau kita Singgah di halaman Tutorial Blogspot saya menjumpai sedikit perbedaan tentang mencapai top page atau bagian page yang di inginkan secara halus. Code yang di gunakan menggunakan CSS biasa dibantu dengan jQuery. Yups langsung saja kita LapTop bagi yang sudah penasaran ingin mencobanya..
1. Silakan login ke account blogger anda.
2. Menuju ke edit HTML dan masukkan script di bawah ini diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
3. Masukan javascript ini dibawah script jQuery tadi
<script type='text/javascript'> //<![CDATA[ $(function(){ $('a[href*=#]').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> 4. Masukan script dibawah ini diatas </body>
<a href='#top' style='display:scroll; position: fixed; bottom:5px;right:5px;' title='Back to Top'><img alt='Back-to-Top08' src='http://i1222.photobucket.com/albums/dd486/bertchoy/back-to-Top08.gif'/></a>
Note : Image dan lokasi gambar bisa anda atur sesukanya.
5. Cari <body> dan gantilah menjadi <body id='top'>
6. Save template.
Semoga bermanfaat, happy blogging!
Thanks to http://www.oblo.web.id/2009/06/back-to-top-dengan-jquery.htm
Post a Comment
Post a Comment