Loading...
ucapan
Tools Dahsyat untuk Membuat Konten Artikel Unik Tanpa Batas & Niche Apapun yang Anda Inginkan

Search, Edit, Spin, & Posting Ke Semua Blog Anda Cukup dari Satu Dashboard Saja.

Support WordPress, WordPress.com, Blogspot, Tumblr, & Twitter

Tools untuk Membuat Konten Artikel

Subsrcibe Ya.. Dan Tunggu Tutorial Lewat Video


Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2016/11/08

Membuat Tombol Back to Top dengan Efek Bounce

Back to Top Bounce effect
Sebenarnya sudah banyak tutorial untuk 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 : Buat widget baru HTML/JavaScript, simpan 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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></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>
Semoga bermanfaat...

Apabila sobat ingin tombol scroll back to top tanpa efek bounce, kunjungi tutorianya DISINI
source : http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html

Pengelola Blog : ABDUL WAHAB

Judul : Membuat Tombol Back to Top dengan Efek Bounce
Ditulis oleh :Blog Zee pada hari 2016/11/08
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Membuat Tombol Back to Top dengan Efek Bounce
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/09/membuat-tombol-back-to-top-dengan-efek.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Membuat Tombol Back to Top dengan Efek Bounce
Description : Sebenarnya sudah banyak tutorial untuk membuat tombol back to top ini, namun ada pertanyaan pengunjung blog ini tentang bagaimana cara m...

4 komentar

Sob Di Edit HTML Saya Kok GX Ada TUlisan < / head > Yah Kenapa :cry: Sorry Ane Spasi Spasi Yg Head Soalnya Ke Block

Pasti ada kok, </head> itu termasuk kode pokok yang ada di blog. ^_^

salam kenal sukses terus gan

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.