Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Rancangan -- Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.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>

5. Letakkan kode dibawah ini diatas 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://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.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;

7. Simpan template sobat dan lihat hasilnya.
Baca Juga : Anekahosting.com web hosting murah terbaik di indonesia
Baca Juga : Exploit Joomla - Remote Shell Upload Vulnerability [ com_fabrik ]
Baca Juga : Proxy Tercepat Di Indonesia

Title Post: Membuat Back To Top dengan Efek Smooth Scroll
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: Avia
Terimakasih sudah berkunjung di blog CyberAsk, Jika ada kritik dan saran silahkan tinggalkan komentar

Artikel Menarik Lainya :