Sebelumnya saya pernah memposting artikel tentang Back to Top saja, namun kali ini sedikit berbeda dengan editan dari script jquery. Perbedaan dengan script ini adalah lebih halus, maksudnya pergerakan dari bawah ke atas (Top) menggunakan tahap tahap perlahan tapi pasti haha. Fungsi Script ini sama seperti Tools Firefox Pergeseran scroll dengan mulus.
View The Demos : Demos Back To Top JQuery
Nah sudah bisa bukan hasilnya? Ayo kita simak perjalanan script ini di blog sobat.
• Buka blogger.com dengan password dan id
• Buka rancangan atau design → Edit Html → Centrang Expand Widget
• Cari kode </head> dan letakan kode berikut diatasnya kode </head>
• Letakan kode berikut diatasnya kode </body> yang biasanya terletak di paling bawah template
• Save template dan sudah selesai tutorial kali ini.
Terima kasih ya sobat semua.
View The Demos : Demos Back To Top JQuery
Nah sudah bisa bukan hasilnya? Ayo kita simak perjalanan script ini di blog sobat.
• Buka blogger.com dengan password dan id
• Buka rancangan atau design → Edit Html → Centrang Expand Widget
• Cari kode </head> dan letakan kode berikut diatasnya kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>• Cari kode <body> dan ubah kode tersebut menjadi <body id='top'>
<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>
• Letakan kode berikut diatasnya kode </body> yang biasanya terletak di paling bawah template
<div id='gotop'>Ubah kode hijau sebagai url gambar sesuai kebutuhan.
<a href='#top' title='Go to Top'>
<img src='http://i1042.photobucket.com/albums/b429/Farix_2010/FarixTop.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
• Save template dan sudah selesai tutorial kali ini.
Terima kasih ya sobat semua.
nice tutrial kawan . ,
BalasHapuskebetulan saya juga sudah pakai . , tapi link-nya saya taruh di text anchor bawah . ,
Iyaa saya sudah melihat punya sobat ^^
BalasHapuskog nggak kerasa jquery nya..pas tak coba langsung naik jadi halaman atas..nggak kerasa smooth..
BalasHapusLihat deh demonya, saya coba bisa kok :) mungkin ada kode yang lupa atau apa yang ketinggalan sob, cek lagi deh
BalasHapusKunjungan silaturahmi kembali di sini saudaraku
BalasHapusTo abufarras : makasih ya kunjungannya
BalasHapus