Membuat Back to Top dengan jQuery

Back to top adalah sebuah link yg menuju bagian atas blog tanpa harus loading, Biasanya ditempatkan melayang di Blog agar lebih mudah untuk mengkliknya. Kali ini saya akan menggunakan sebuah kode jQuery, bagi yg belum mengerti Saya sudah menyediakan Script jQuery tersebut yg nantinya ditempatkan di Blog Sobat:









1. Pertama, pastinya sobat harus masuk/login ke halaman depan Blogger
2. Lalu Klik Rancangan -> Elemen Laman -> Tambah Gadget -> HTML/Javascript
3. Copy-Paste Script jQuery berikut ke tempat yg sudah disediakan :

<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });
}
}, 100);
});
});
</script>

4. Ganti Tulisan yg berwarna Hijau dengan Ukuran yg Sobat Inginkan
    Ganti Tulisan yg berwarna Biru dengan Ukuran tempat link yg sobat inginkan
    Ganti Tulisan yg berwarna Merah dengan Warna HTML yg sobat inginkan
    Ganti Tulisan yg berwarna Orange dengan Tulisan yg Sobat Inginkan
    Kalau tidak mau diganti juga tidak apaapa :)
5. Klik Simpan dan Lihat Hasilnya : )

Mungkin terkadang sobat bertanya kenapa saya tidak memakai Back to Top tersebut. Karena Blog saya terlalu berat untuk loading, dan akan bertambah berat jika ditambah Back to Top tersebut :)
Jangan lupa difollow ya :D

Posted in: Tips and Trick