Postingan kali ini ialah lanjutan dari postingan yang sebelumnya pernah kita bahas bersama yaitu Cara Memasang Tombol Back to Top di Blog, disitu dibahas cara pemasanganya sehingga akan memudahkan pengunjung blog kalau ingin kembali ke halaman atas cukup klik tombol back to Top dan secara otomatis layar akan menggulung ke atas halaman.
Dipostingan kali ini akan membahas lanjutannya yaitu Cara Menambahkan Tombol Go To Down Di Tombol Back To Top yang pasti ada Top pasti ada Down, disini aku akan bahas dan sedikit menambahkan isyarat script pada tombol tersebut yang sebelumnya sudah terpasang yaitu tombol Back To Top yang script ini aku adopsi dari Kang Ismet dengan menggunakan sedikit kreasi tombol sehingga memunculkan efek bounce didalam tombol go to down tersebut.
Didalam tampilannya nanti disajikan sama pada tampilan tombolnya yang sudah mengunakan after dan before jadi bahasa gampangnya cukup membalikkan saja arah panahnya yang sebelumnya keatas sekarang ke bawah pada tombolnya.
Langsung saja bagi sahabat yang mau mencobanya mari kita bahas bersama dan ikuti langkah berikut ini.
Langkah Pertama
Silahkan sahabat salin isyarat CSS dibawah ini untuk penambahan tombol go to down lalu silahkan letakkan diatas isyarat ]]></b:skin> atau </style>.
#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;} #GoToDown:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#333 transparent transparent transparent; line-height:0;} #GoToDown:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#888 transparent transparent transparent; line-height:0 } #GoToDown:after {content:""; position:absolute; top:5px; right:11px; width:0; height:0; border-style:solid; border-width:12px 9px 0 9px; border-color:#fff transparent transparent transparent; line-height:0;} Langkah Ke Dua
Silahkan sahabat tambahkan isyarat dibawah ini di isyarat Javascript back to top yang aku adopsi dari Kang Ismet untuk menambahkan efek bounce nantinya pada tampilan tombol tersebut.
var $elem = $('body'); $('#GoToDown').click(function () { $('html, body').animate({scrollTop: $elem.height()}, 4000); $('#GoToDown').fadeOut() }); $('#BounceToTop').click(function () { $('#GoToDown').fadeIn() }); Setelah ditambahkan isyarat tersebut nanti tampilannya akan ibarat dibawah ini.
<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); }); var $elem = $('body'); $('#GoToDown').click(function () { $('html, body').animate({scrollTop: $elem.height()}, 4000); $('#GoToDown').fadeOut() }); $('#BounceToTop').click(function () { $('#GoToDown').fadeIn() }); }); </script> Langkah Ke Tiga
Silahkan sahabat salin isyarat untuk pemanggil Goto To Down dan letakkan sempurna di bawah isyarat pemanggil Back To Top <div id='BounceToTop'/> dan posisi isyarat pemanggil ini sempurna di bawah isyarat Javascript.
<div id='GoToDown'/>Atau lebih jelasnya ibarat ini silahkan sahabat salin isyarat Javascript ini dan pemanggil tombolnya lalu letakkan sempurna di atas </body>.
<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); }); var $elem = $('body'); $('#GoToDown').click(function () { $('html, body').animate({scrollTop: $elem.height()}, 4000); $('#GoToDown').fadeOut() }); $('#BounceToTop').click(function () { $('#GoToDown').fadeIn() }); }); </script> <div id='BounceToTop'/> <div id='GoToDown'/> Sedikit kekurangan dan hingga ketika ini aku belum berhasil menampilkan efek Boucenya pada tombol Go To Down ibarat musti banyak mencar ilmu lebih dalam lagi sama Kang Ismet dan Kang Adhy Suryadi, dan pasti akan aku updated kalau sudah berhasil nanti. Dan Selesai selamat mencoba.
Comments