Tombol scroll Back To Top adalah sebuah widget yang berfungsi untuk memudahkan pengunjung blog/visitor termasuk saya ketika telah selesai membaca artikel yang sangat panjang dan ingin kembali ke atas (Back to top) hanya dengan menekan satu kali klik pada widget tombol back to top. Tentu cara ini lebih efektif dan cepat jika di bandingkan menekan tombol scroll pada mouse.
Widget Tombol Scroll Back To Top juga sering disebut "Return top of page", "Boost to top", "Kembali ke atas" dan "Meluncur ke atas. Widget tombol scroll back to top yang saya bagikan ini menggunakan jQuery Smooth Effect, jika di klik tombol back to top tersebut akan meluncur ke atas secara perlahan. Berbeda dengan widget tombol back to top yang tidak menggunakan Efek jQuery Smooth seperti yang saya gunakan di Blog Bintaro ini, lihat di bagian footer "Back to top" di sebelah kanan powered by blogger. Widget back to top yang saya gunakan jika di klik akan langsung meluncur ke atas dengan cepat.
1. Pada dashboard, Klik more options > Template > Edit Html > Proceed.
2. Cari kode ]]></b:skin>
3. Lalu letakkan kode di bawah ini, 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(http://3.bp.blogspot.com/-jrFNXDeeEks/UDShawDOYjI/AAAAAAAAAj0/OBqNuD_WkwQ/s1600/Back-to-top-blog-bintaro.png) no-repeat left top;
}
#toTopHover {
background:url(http://3.bp.blogspot.com/-jrFNXDeeEks/UDShawDOYjI/AAAAAAAAAj0/OBqNuD_WkwQ/s1600/Back-to-top-blog-bintaro.png) 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;
}
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script src='http://blogbintaro.googlecode.com/files/jquery.1.3.bb.js' type='text/javascript'/><script src='http://blogbintaro.googlecode.com/files/jquery.backtotop.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {/*var defaults = {containerID: 'moccaUItoTop', // fading element idcontainerHoverClass: 'moccaUIhover', // fading element hover classscrollSpeed: 1200,easingType: 'linear' };*/
$().UItoTop({ easingType: 'easeOutQuart' });
});</script>
4. Cari kode </head>
5. Kemudian letakkan kode di bawah ini, Di Atas kode </head>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script src='http://blogbintaro.googlecode.com/files/jquery.1.3.bb.js' type='text/javascript'/><script src='http://blogbintaro.googlecode.com/files/jquery.backtotop.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {/*var defaults = {containerID: 'moccaUItoTop', // fading element idcontainerHoverClass: 'moccaUIhover', // fading element hover classscrollSpeed: 1200,easingType: 'linear' };*/
$().UItoTop({ easingType: 'easeOutQuart' });
});</script>
6. Terakhir, cari kode </body>
7. Lalu letakkan kode di bawah ini, Tepat Di Atas kode </body>
<a href='#' id='toTop' style='display: block; opacity: 1;' title='Back to Top'/>
8. Done! Silahkan tinggalkan komentar untuk response atau pertanyaan mengenai Cara membuat tombol scroll back to top dengan efek jQuery di Blogger.
