Cara Membuat Back To Top Button Dengan Efek Bounce

Posted by : Unknown Senin, 31 Desember 2012

Seperti diatas lah tampilan back to top button yang akan saya post.

Langsung saja:

1. Login blogger

2.Template >> Edit HTML . Centang Expand Template Widget

3.Cari Kode </head>

4.Copy dan pastekan script dibawah diatas kode </head>

$('#ElitesRunTop> img').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

5.Lalu Simpan Template, Ke menu Tata Letak.

6.Tambah Gadget, HTML/JavaScript

7.Masukan Script Dibawah

<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='http://relay.acsevents.org/images/content/pagebuilder/back_to_top_button_purple.png' style='margin-right:-9px'/></div>

Simpan dan liat hasilnya.

Jika mau gambar yang lain tinggal ganti URL
http://relay.acsevents.org/images/content/pagebuilder/back_to_top_button_purple.png
menjadi URL Gambar Anda

Contoh Gambar Lain:

1. Blue Button

Scriptnya:

<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='http://www.kidspot.com.au/babyclub/product-information/images/back_to_top_button_blue.png' style='margin-right:-9px'/></div>

2. Red Button

Scriptnya:

<style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='https://www.dmwcc.com/Portals/0/buttons/BackToTopButton.gif' style='margin-right:-9px'/></div>

(Sumber: http://hermanbagus.blogspot.com/2013/01/cara-membuat-back-to-top-dengan-efek.html
dengan perubahan yang perlu)