Postingan kali ini adalah 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 jika 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 saya akan bahas dan sedikit menambahkan kode script pada tombol tersebut yang sebelumnya sudah terpasang yaitu tombol Back To Top yang script ini saya 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 sobat yang mau mencobanya mari kita bahas bersama dan ikuti langkah berikut ini.
Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini untuk penambahan tombol go to down lalu silahkan letakkan diatas kode ]]></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 sobat tambahkan kode dibawah ini di kode Javascript back to top yang saya 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 kode tersebut nanti tampilannya akan seperti 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 sobat salin kode untuk pemanggil Goto To Down dan letakkan tepat di bawah kode pemanggil Back To Top <div id='BounceToTop'/> dan posisi kode pemanggil ini tepat di bawah kode Javascript.
<div id='GoToDown'/>Atau lebih jelasnya seperti ini silahkan sobat salin kode Javascript ini dan pemanggil tombolnya lalu letakkan tepat 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 sampai saat ini saya belum berhasil menampilkan efek Boucenya pada tombol Go To Down seperti musti banyak berguru lebih dalam lagi sama Kang Ismet dan Kang Adhy Suryadi, dan pasti akan saya updated jika sudah berhasil nanti. Dan Selesai selamat mencoba.
EmoticonEmoticon