Tombol Back To Top Efek Bounce

Mungkin kalian pernah melihat blog yang ketika di scroll ke bawah akan muncul sebuah tombol di pinggir bawah blog, ketika di klik maka page nya akan berpindah ke atasa dengan efek seperti bola jatuh. Nah itu yang disebut efek bounce. Efek bounce diambil dari sebuah permainan legendaris yang ada di Handphone jadul yaitu bounce.

Namun bagi anda penggemar blog dengan style yang penuh dengan animasi maka tak salah anda mengunjungi situs ini karena efek ini akan memberikan kesan animasi yang sangat bagus terhadapa blog atau website anda. Dengan menambahkan script ini berarti anda udah memahami tentang kode javascript di blogger.

How to Make Back To Top Button With Bounce Effect ~Mungkin kalian pernah melihat back to top di blog-blog tetangga,tetapi back to top ini lebih keren karena dilengkapi dengan efek bounce (memantul). jadi pengunjung bisa melihat sesuatu hal yang berbeda diblog anda dan jika anda ingin melihat demonya tidak usah jauh-jauh,karena di blog ini juga ada dan jika anda tertarik untuk memasang silakan ikuti cara-cara dari saya:

Langkah pertama pasang jqueri dulu [simpan diatas kode  </head> ]: 

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

Nb:lewati langkah ini jika template blog sobat sudah terpasang jquery.Versi jquery bisa berbeda 1.3.2, 1.6.4, 1.7.1,dan seterusnya...
Langkah kedua simpan kode dibawah ini tepat diatas 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 ketiga buat widget baru pilih HTML/Javascript lalu simpan kode dibawah ini:

<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/AVvXsEhCY-FUKuWRw_7p22hclDts1WEsTkgvZXIm2PsCwsSF-tO6lugLSS2B-G6NwlCuoSzylVQ6lwj3zhc48R8h7a_zOl1WubBBk5yHrpFJlMVfJYdWBS9_uS670dUFu8mHAVlHuIyFQVadImHS/s1600/arrow-up_basic_blue.png'/></div>

Untuk mengganti gambar bisa diganti tulisan yang bewarna merah.
Lalu Save

DEMO

Sekian pemberian dari saya semoga bermanfaat bagi nusa, bangsa dan negara. hehe bercanda.

Sumber

sekian artikel dari saya semoga manjadi manfaat untuk anda.

incoming search
trik buat scroll to top efek bounce, cara membuat efek scroll to top.

loading...

Anda Sedang Membaca Artikel Tentang Tombol Back To Top Efek Bounce Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/01/tombol-back-to-top-efek-bounce.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.

#TAGS Tutorial Blogger