Membuat Back To Top dengan Efek Bounce

Assalamualaikum sobat blogger, kesempatan kali ini aku mau berbagi tutorial Membuat Back To Top dengan Efek Bounce. Ya meskipun sudah banyak yang share artikel, tak apalah. Bagi yang belum tau silahkan disimak yaa.

-Sumber referensi : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

Langkah 1 :

Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Jika di template kalian sudah ada lewati saja langkah pertama. Biasanya ada beberapa versi yakni 1.3.2, 1.6.4, 1.7.1, dll

Langkah 2 :

Letakkan kode dibawah ini sebelum kode </head>

<script type='text/javascript'>

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });

$('#BounceToTop').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>

Langkah 3 :

Pilih Tata Letak>add widget>html/java script
Pastekan kode dibawah ini dikonten kemudian simpan

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XdqMHYUp8CwY5X4SK1y9j5h9ftcqB8zB0DViXfGV91VSgrn0_V7sAq3m9SlaJXUJNzg6w8vX6NFqAzYZxBCmKRNVC2GPte0s_E6k3JZfLnCh08VQd9dEQp90w68dMbiKf-rIU5BR_H7J/s1600/arrow-up_basic_blue.png'/></div>

Anda bisa ganti gambar tombolnya dengan gambar sesuka kalian dengan mengganti kode warna merah dengan Url gambar sobat

Yoroshiku !!!!

Share :

Tweet

More

Related Post