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>
p/s:

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.
Button back to top versi 3

wah, bestnyer tutorial ni. tak sabar nak try balik nnt. maklumlah sy newbie dlm blogging ni. terima kasih byk for this usefull tips.

selain tu blh guna HOME kat keyboard

salam..
terima kasih..
saya dengan ini akan
menggunakannya..hu hu

dah try and berjaya...yeah.tq. tp kalo kat morzilla tak bleh. this script hanya utk IE shj ye?

Salam...

Datang tgk tuto baru....

Salam... thx 4 share bende nih... sy dh brjaye taruk kt blig sy... mmg best... trime kasih yek..

hebat.
tip yang menarik!

salam.. nak tnye boleh tak ajar camne nk buat back to top dekat bwh setiap entry? tolong ajar kalau tau, sebab dah lama cari tutorial nie :)

dah buat berjaya...thanks

wah ! sampai bwh bru dy appear kt tngah2 plak 2.. tengs ! hehek

salam... timekasih bebanyak...

salam, kalau nk slow kn kelajuan dia tuh boleh x?

blog yang menarik gan, salam dari indonesia...mampir blog ana ya...http://elgharuty82.blogspot.com/

Boleh saya pinjam tutorial ini? Terima kasih.

dalam banyak-banyak klas tutorial, saya paling suka class tutorial ini, copy then paste.hehe..tunjuk cara juga mudah di fahami. tahniah!dan terima kasih. semoga dipermudahkan sgla urusan encik :)-