Home »TUTORIAL»Membuat back to top dengan jquery Smoothscroll
Wah, aku kembali lagi nih. kali ini aku kembali dengan blog tutorial yang sudah lama tidak aku tampilkan.
Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.
1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery 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(){
$('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>
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/AVvXsEhqFPDWfz5NE0jPoVSkb-eZsEHmVWkTLzL246OqdxDesAsGhts1YCc9yJAq5YB2FzEr0iQ9x7bpeS_jn5nJPbbPJ60k-vZHzucNxfeG9pd8vnykN3DV-_z4IrvTdgOEN7TGyEJTLlXW_fE7/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
7. Selesai, dan silahkan menikmati back to top jquery
Kritik komentar dan saran kalian sangat ditunggu bro, Bagi yang lebih mengetahui bisa share, ok..
Membuat back to top dengan jquery Smoothscroll
Posted on 9:51 PM by Damar Yosa Aji
Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.
1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery 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(){
$('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>
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/AVvXsEhqFPDWfz5NE0jPoVSkb-eZsEHmVWkTLzL246OqdxDesAsGhts1YCc9yJAq5YB2FzEr0iQ9x7bpeS_jn5nJPbbPJ60k-vZHzucNxfeG9pd8vnykN3DV-_z4IrvTdgOEN7TGyEJTLlXW_fE7/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
7. Selesai, dan silahkan menikmati back to top jquery
Kritik komentar dan saran kalian sangat ditunggu bro, Bagi yang lebih mengetahui bisa share, ok..
