Membuat Back To Top dengan Efek JQuery

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Masukan kode javascript ini setelah 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 scro

5. Cari kode <body> dan ubah menjadi <body id='top'>
6. 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>

7. Simpan template anda dan lihat hasilnya.

CSS

Search This Blog

Membuat Back To Top dengan Efek JQuery

Tidak ada komentar:

Posting Komentar

COMEN