Button back to top (versi 3)

Back to top button versi 3 seperti gambar diatas.Apabila anda klik padanya dan page akan scroll secara automatik ke atas.

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

Langkah 1
Copy kode dibawah ini.

<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>

Info Penting:

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;


Langkah 2

Cara Pemasangan.

1. Login ke Blogger, Klik Design :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak;

3. Pilih HTML/Javascript;

4. Copy paste code HTML diatas ke dalam Content yang telah tersedia;

Semoga Berjaya :)