Tutorial : Button back to top versi 3

Back to top button versi 3 yang boleh anda lihat pada bahagian bawah post (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.


Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah.
Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>
Langkah 2

Salin kod di bawah dan paste pada ruang content HTML/Javascript (rujuk langkah 1) dan Save.


<style type="text/css">
#scrolltotop a
{
display: block;
display: none;
z-index: 999;
opacity: .6;
position: fixed;
top: 100%;
margin-top: -20px;
left: 50%;
margin-left: -150px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 68px;
line-height: 1px;
height: 15px;
padding: 10px 3px;
background-color: #000;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #fff;
}
</style>
<div id="scrolltotop"><a href="#">Scroll to top</a></div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $scrolltotop = $('#scrolltotop a');
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$scrolltotop.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });
}
}, 100);
});
});
</script>


Notes :


1.Warna button boleh di edit dengan menukar kod warna bagi background-color: #000;

2.Kedudukan boleh di edit dengan mengubah nilai margin-left: -150px;

Akhir sekali, klik Preview. Jika tiada mesej Error terpapar, klik saja Save.