Tombol Back to Top Dengan Efek jQuery Untuk Blogger

Saya pikir, tombol back to top sangatlah penting untuk dipasang di sebuah blog. Tujuan utama dari tombol ini tak lain dan tak bukan adalah untuk memundahkan pembaca untuk kembali ke atas page dengan cepat.

Tombol back to top yang akan kita buat ini bukanlah tombol back to top yang hanya menggunakan kode CSS saja, tapi ditambah dengan sentuhan kode jQuery, sehingga akan ada efek halusnya. Tertarik membuatnya, mari kita buat sekarang!

Live Demo

Langkah 1
Salin kode berikut di atas kode ]]></b:skin>

#toTop {

display:none;

text-decoration:none;

position:fixed;

bottom:10px;

right:10px;

overflow:hidden;

width:51px;

height:51px;

border:none;

text-indent:-999px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLG1f7A9q4Mk0gQfTh5uhN9_OYLENkdv_bqXmoqMXNwlQJGNJqFbk9umA0JUSmdgMwWXQf4RWxRH7N7jacLYzgBBrqpfdKJxJ7lQvw4dwQR1wPRQkbYS8Lpj4t03W5TUf4NoMu0rhc6RI/) no-repeat left top;

}

#toTopHover {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLG1f7A9q4Mk0gQfTh5uhN9_OYLENkdv_bqXmoqMXNwlQJGNJqFbk9umA0JUSmdgMwWXQf4RWxRH7N7jacLYzgBBrqpfdKJxJ7lQvw4dwQR1wPRQkbYS8Lpj4t03W5TUf4NoMu0rhc6RI/) no-repeat left -51px;

width:51px;

height:51px;

display:block;

overflow:hidden;

float:left;

opacity: 0;

-moz-opacity: 0;

filter:alpha(opacity=0);

}

#toTop:active, #toTop:focus {

outline:none;

}

Langkah 2
Salin kode berikut di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

Langkah 3
Simpan template kamu