Scroll 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 Scroll 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.
Statis Scroll to Top pada dasarnya adalah tag anchor yang pernah dibahas pada artikel "Memahami Tag Anchor", kemudian dilengkapi dengan jQuery membuat proses scroll itu menjadi halus, pergeseran halaman dari bawah menuju keatas awalnya cepat kemudian perlahan-lahan kecepatan menurun sampai berhenti pada bagian atas halaman. Demonya ada pada halaman blog ini sebelah kanan bawah dengan tombol panah ke atas.
Memasang Static Scroll to Top with jQuery
Langkah 1Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>Langkah 5
Masukan (copy paste) kode css dibawah ini diatas kode pada langkah 4:
#kaluhur{
right:20px;
bottom:20px;
position: fixed;
}
Langkah 6Cari kode dibawah ini:
</head>Langkah 7
Masukan (copy paste) kode JavaScript jQuery dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>Langkah 8
<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>
Cari kode dibawah ini:
<body>Langkah 9
Tambahkan kode id="luhur" pada kode langkah 8 sehingga menjadi seperti dibawah ini:
<body id="luhur">Langkah 10
Cari kode dibawah ini:
</body>Langkah 11
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 10:
<div id='kaluhur'>Langkah 12
<a href='#luhur' title='Luhur'><img src='http://lh6.ggpht.com/_xcD4JK_dIjU/S4QCfI_V6LI/AAAAAAAAD1A/JK107RTwhiw/d/kaluhur.gif'/></a>
</div>
Simpan template dan preview blog...
Keterangan:
- Perhatikan langkah 5! Ubah kode css sesuai keinginan anda; right=kanan; bottom=bawah; ini berarti tombol berada disisi kanan bawah; jika ingin berada di sebelah kiri bawah ubah "right" menjadi "left" (tanpa tanda kutip).
- Perhatikan langkah 11! Ubah url gambar (http://URL/kaluhur.gif) jika anda akan menggunakan gambar milik anda sendiri.
