Menambahkan Tombol Link Scroll To Top

Jika blog anda punya artikel pos yang panjang, cobalah menambahkan link "scroll to top" untuk memudahkan pengunjung menavigasi halaman blog anda. Selain link berupa tulisan "scroll to top" atau semacamnya, anda juga bisa menambahkan gambar yang bisa mewakili maksud tersebut.

Sebagian dari anda mungkin sudah tahu bagaimana menambahkan 'scroll to top' dengan menambahkan kode sederhana '#top' pada link. Namun, trik menambahkan link 'scroll to top' dengan gambar yang akan aku tuliskan ini menggunakan Jquery yang membuatnya benar-benar smooth (pasti anda akan menyukainya).



Jadi, mari pelajari bagaimana menambahkan link 'scroll to top' dengan gambar ke blog anda ini..

1. Masuk ke Dashboard blog » Layout » Edit html dan temukan kode berikut :

</body>

Di atas kode tersebut, Tambahkan kode berikut ini :

<a href="#" id="backtotop">^ Scroll to Top</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
/*-----------------------
*Scroll to top
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {

$("#toTop").scrollToTop();

});

</script>

2. Cari kode berikut :

]]></b:skin>

Sebelum kode tersebut, tambahkan kode berikut :

#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

3. Simpan hasil kerja anda.