Memasang Back To Top Button Pada Blog

Memasang back to top button sangat penting agar memudahkan pengunjung, bila sebelumnya aku share tentang Membuat Back To Top Unik Dengan Cacing. Kali ini aku share back to top button sederhana. Pada versi ada agak sedikit berbeda, yaitu ada penambahan efek smoothing.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}

3. Kemudian simpan kode ini diatas kode </body>

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEcG0o60fo1ujkXxvKmgFPQdy1QskfHcrlLhFwgjn-tF2Rp9r1IFY-06V7PHybmToNsCp4u6bBLSxH__fER_NnWym2Wza47ANRwR4KVYw-f8-54gZQcddxS2iUROsdJXAj3FZShJEG9hMX/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>

Demo