Sabtu, 20 Oktober 2012

Cara Membuat Back to Top Dengan jQuery

Anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.

Berikut Cara Membuat Smoothscroll Go to Top


1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Cari kode </head> lalu paste kode berikut di atasnya :
Kodenya :
<!-- SCROLLING BACK-TO-TOP --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini --> <script type='text/javascript'> $(function(){ $(&#39;a[href*=#top]&#39;).click(function() { if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;) &amp;&amp; location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;); if ($target.length) { var targetOffset = $target.offset().top; $(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000); return false; } } }); }); </script> <!-- SCROLLING BACK-TO-TOP END -->
4. Cari kode <body> lalu masukkan atribut id='top' ke dalam tag <body>  maka hasilnya akan seperti <body id='top'>
5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya :
Kodenya :
<div id='gotop'> <a href='#top' title='Go to Top'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNTsw73gDDzHT0KFIzoy1fSPE-bTV66i18pGxgEcR1lpvV5dnF2Q2dyB4mkzmym5yw1yLJ1OXwM74bdeaVNEseENZm0q9DcV5oyO4ecA5Ly2URuq1alinjtT63wBCR0VyExQvc77VS34/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/> </a> </div>
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNTsw73gDDzHT0KFIzoy1fSPE-bTV66i18pGxgEcR1lpvV5dnF2Q2dyB4mkzmym5yw1yLJ1OXwM74bdeaVNEseENZm0q9DcV5oyO4ecA5Ly2URuq1alinjtT63wBCR0VyExQvc77VS34/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

info: untuk gambar / tombolnya bisa anda download disini.

6. Terakhir, klik Save Template.
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)