Membuat Tombol Back to Top dengan Efek Bounce

Unknown

Blogspot, CSS, Wordpress

Rabu, 19 Februari 2014

Belum ada komentar

Back to Top Button with Bounce Effect - Sebenarnya sudah banyak tutorial untum membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara membuat tombol back to top dengan efek bounce.

Sebelum melangkah pada tutorial, saya mengucapkan terimakasih kepada pengunjung blog ini, karena dengan berbagai pertanyaan memunculkan ide untuk membuat artike baru.

Lanjut kepada tutorial... Apa sebenarnya efek bounce itu? bounce artinya memantul, jadi back to top setelah discroll akan ada sedikit efek pantulan. Untuk menerapkannya, silahkan ikuti langkah mudahnya :

Langkah 1 : Simpan kode jQuery di atas </head>

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

lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

Langkah 2 : Simpan kode ini masih di atas </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 : Tambahkan kode css berikut ini: 

#BounceToTop{
-webkit-transition:all 0.3s ease-out;
  background-color:#5C6C7E;
  background-position:initial initial;
  background-repeat:initial initial;
  border-bottom-left-radius:1000px;
  border-bottom-right-radius:1000px;
  border-top-left-radius:1000px;
  border-top-right-radius:1000px;
  bottom:10px;
  cursor:pointer;
  display:none;
  height:40px;
  padding:5px;
  position:fixed;
  right:10px;
  text-align:center;
  transition:all 0.3s ease-out;
  width:40px;
}

#BounceToTop:before {
content: "";
position: absolute;
bottom: 18px;
right: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 16px 12px;
border-color: transparent transparent #fff transparent;
line-height: 0;
}
#BounceToTop:after {
content: "";
position: absolute;
bottom: 18px;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 14px 11px;
border-color: transparent transparent #5c6c7e transparent;
line-height: 0;
transition: all .3s ease-out;
}

Langkah 3 : Buat widget baru HTML/JavaScript, simpan kode ini :

<div id='BounceToTop'  style="display: block;"></div>

Tampilan tombol dengan kode di atas menggunakan fade in / fade out (muncul perlahan), apabila tombol ingin muncul dari bawah seperti blog ini, ganti kode pada langkah 2 dengan kode ini :

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

Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI.

Semoga bermanfaat....

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