Membuat Tombol Back To Top Dengan Efek Bounce ~ Semua Ada Di Sini

Monday, September 9, 2013

Prima Share - Setelah beberapa bulan yang lalu kita membahas tentang Membuat Tombol Back To Top Keren Dengan JQuery, sekarang kita akan membuat hal yang sama tetapi kali ini dengan efek bounce/memantul setelah di scroll. Untuk menerapkanya, silahkan ikuti tutorial berikut ..

1. Log-in ke Blogger
2. Masuk ke Template >> Edit HTML
3.. Simpan kode JQuery di bawah kode </head>

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

* Lewati langkah ini jika di blogmu sudah ada kode JQuery

4. Salin dan letakkan kode berikut di bawah 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>

Keterangan:
Kode di atas berfungsi untuk membuat efek fade in/fade out (muncul secara perlahan), jika ingin membuatnya muncul dari bawah silahkan ganti dengan kode:

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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>

5. Simpan template
6. Buat widget baru HTML/Javascript ( Tata Letak >> Tambah Widget >> HTML/Javascript) dan masukkan kode 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/AVvXsEickydDYieeJ-_UdpmOSaiFlV7Y2x1V59KFt9lz2KVkoZ2Eq3Q_bvykT4hUQOAWd_9qUMK-tdN9S5xoIrCNy1a4s4TO0wey832MhrKjItj6DptLh6ggaAtvS6SeMWeJLbiQmd0HrvaQVyB5/s1600/arrow-up_basic_blue.png'/></div>

7. Simpan widget

Sekian artikel tentang Membuat Tombol Back To Top Dengan Efek Bounce semoga bermanfaat ...

source