© COOL INSIDE - MEDIA INFORMATION ONLINE - MENYAJIKAN BERITA DAN INFORMASI YANG LAYAK ANDA BACA

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/AVvXsEia2a0GgBD1oOuAuamPQj4s9S1jBPyg65N5pPwYSs4nYoOjTIjzT9T-s3twJdE3EzWWqGEEi6kW1oiAtdXClzVlPqb7DiowXZDyAvmKqgKLhcIgkyYs6yeZ3CwlVZS8pXjPNlp0fp-wT6H5/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.

Silahkan Berbagi Artikel ini ke : Facebook Twitter Google+

Terimakasih Atas Kunjungan Anda

INFORMASI LAINNYA:



 

Copyright 2015 | COOL INSIDE - Media Informasi Online | Designed by coolinside | Dofollow

© COOL INSIDE - Best View on Google Chrome

Back To Top