CARA PASANG ‘BACK TO TOP’ DENGAN JQUERY

jquery-logo_png Cara pasang ‘back to top’ dengan kode jquery ini lebih lengkap dan simple serta nampak lebih halus, karena tidak berjalan langsung naik ke atas dengan cepat seperti roket namun bergeser secara perlahan dan lembut seperti membelai rambut ‘yayang’, hee...

 

Kita langsung saja membuat back to top dengan jquery-nya :

1. Silahkan login ke blogger sobat
2. Lalu klik tab Rancangan
3. Pilih yang Edit HTML
4. Masukan kode di jquery dibawah ini, di atas kode </head>

<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>

5. Kemudian Ganti kode <body> dengan kode <body id='top'>
6. letakan kode di bawah ini, di atas kode </body>

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bbSUEibsGdlZ26zKSff7hx0WVfKvKdhpcd_-ZgVl-1hO13eB7g1eEZdXKBNwRJZv0qafBG9dOL15GuwdrEfaRT73tQDNDm9WkVJY1lnIxxmkwjJTJEeL57FuVCdkxSx8X2QUmf7EzFXb/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

*untuk kode warna merahnya (itu adalah alamat dimana sobat menyimpan gambar; bisa diblog sendiri atau dihosting langganan sobat), silahkan sobat ganti-ganti gambar tanda panahnya itu.

7. Selesai, dan silahkan mencoba.


Semoga Artikel ini Bermanfa'at
Berbagi Artikel ini ke : Facebook Twitter Google+

ARTIKEL TERKAIT



Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul: CARA PASANG ‘BACK TO TOP’ DENGAN JQUERY
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Admin MOREPOST
Semoga informasi mengenai CARA PASANG ‘BACK TO TOP’ DENGAN JQUERY bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda sangat dibutuhkan, di bawah ini.

- Copyright © RUANG BERNUANSA BIRU -INFORMASI SEPUTAR DUNIA MUSIK - FILM DAN GAMES- Powered by Blogger - Designed by EH2015 -