Membuat Back To Top Dengan Sentuhan jQuery

Text Resizer: Click for Resizer

Back To Top jika diterjemahkan secara bebas berarti gulung atau geser ke atas. Sebenarnya kita bisa saja menggulung halaman blog keatas melalui scroll bar pada browser yang biasanya terletak disebelah sisi kanan halaman blog. Tetapi jika halaman blog/artikel tersebut panjang maka ini cukup merepotkan pembaca blog kita ketika mereka ingin kembali ke bagian atas halaman, dengan tambahan fasilitas Statis Back to Top membuat proses scroll menjadi mudah, pembaca blog cukup dengan meng-klik satu kali tombol scroll yang selalu dalam posisi tetap (statis) maka halaman akan di geser/di gulung keatas dengan kecepatan yang berbeda-beda.

Pada kesempatan kali ini saya akan share ilmu tentang Membuat Back To Top Dengan Sentuhan jQuery. Contoh dari Back To Top sama seperti punya saya.Bagaimana Anda tertarik untuk membuatnya???

Untuk membuatnya seperti biasa log in dulu ke account blog anda.

Masuk ke Rancangan Kemudian pilih Edit HTML

Jangan lupa centang "Expand Template Widget"

Setelah itu Cari kode berikut ini ]]></b:skin> setelah ketemu masukkan kode dibawah ini diatasnya

#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}

Cari kode ini </head> setelah itu Copy paste kode di bawah ini di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href*=#luhur]').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>

Masih belum selesai kawan kemudian cari kode <body> ganti dengan <body id="luhur">

Cari lagi kode </body> dan copy paste kode di bawah ini di atasnya

<div id='kaluhur'>
<a href='#luhur' title='Luhur'><img src='http://lh6.ggpht.com/_xcD4JK_dIjU/S4QCfI_V6LI/AAAAAAAAD1A/JK107RTwhiw/d/kaluhur.gif'/></a>
</div>

Langkah terakhir Simpan template

Selesai Dech

Source : http://modification-blog.blogspot.com/

Artikel Terkait:

jQuery

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Back To Top Dengan Sentuhan jQuery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.