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.


{ 16 comments.. read them below or add one }

noreed noreed 4:55 PM
wah, bestnyer tutorial ni. tak sabar nak try balik nnt. maklumlah sy newbie dlm blogging ni. terima kasih byk for this usefull tips.
Wan Perlis Wan Perlis 7:23 PM
selain tu blh guna HOME kat keyboard
zulkbo zulkbo 2:04 AM
salam..
terima kasih..
saya dengan ini akan
menggunakannya..hu hu
noreed noreed 4:45 PM
dah try and berjaya...yeah.tq. tp kalo kat morzilla tak bleh. this script hanya utk IE shj ye?
iza iza 5:57 PM
Salam...

Datang tgk tuto baru....
Sekapur Sireh Sekapur Sireh 12:02 AM
Salam... thx 4 share bende nih... sy dh brjaye taruk kt blig sy... mmg best... trime kasih yek..
SABUN SABUN 2:08 PM
hebat.
tip yang menarik!
jeera jeera 1:54 AM
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 :)
faiz faiz 9:56 PM
dah buat berjaya...thanks
Erma Azni Erma Azni 11:35 AM
wah ! sampai bwh bru dy appear kt tngah2 plak 2.. tengs ! hehek
norezshah norezshah 2:58 AM
salam... timekasih bebanyak...
WakafKita11 WakafKita11 11:55 PM
salam, kalau nk slow kn kelajuan dia tuh boleh x?
elgharuty 82 elgharuty 82 8:42 AM
blog yang menarik gan, salam dari indonesia...mampir blog ana ya...http://elgharuty82.blogspot.com/
KautharK KautharK 12:30 PM
Boleh saya pinjam tutorial ini? Terima kasih.
Cik Matahariku Cik Matahariku 9:02 AM
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 :)-