Menambahkan Tombol Go To Down Pada Tombol Back To Top

Untuk menjawab pertanyaan dari sista Cindy Nailla, aku mencoba menambahkan sedikit isyarat lagi pada script back to top dari Kang Ismet yang memakai dampak bounce untuk menciptakan tombol go to down.

Untuk tampilan tombolnya kita buat sama dengan sebelumnya yang memakai before dan after, hanya membalikan arah panahnya menjadi ke bawah (membalikan border pada before dan after).

Sebelumnya Anda harus membaca dulu postingan sebelumnya semoga dapat nyambung dengan postingan ini, silahkan simak pada link berikut:

Baca juga: Membuat Tombol Back To Top Dengan Before Dan After

Setelah Anda memasang tombol Back To Top tersebut sekarang tinggal menambahkan tombol Go To Down. Silahkan tambahkan isyarat CSS untuk tombol go to down di bawah ini dan simpan di atas 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;}
 

Kemudian tambahkan isyarat di bawah ini pada javascript back to top dari Kang Ismet yang memakai dampak bounce:

 var $elem = $('body');
 $('#GoToDown').click(function () {
 $('html, body').animate({scrollTop: $elem.height()}, 4000);
 $('#GoToDown').fadeOut()
 });
 $('#BounceToTop').click(function () {
 $('#GoToDown').fadeIn()
 });
 

Sehingga sehabis ditambahkan akan menjadi ibarat di bawah ini:

 <script type='text/javascript'>
 $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;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>
 

Tambahkan pemanggilnya dan simpan sempurna di bawah pemanggil back to top (<div id='BounceToTop'/>) isyarat pemanggil ini berada sempurna di bawah isyarat javascript.

 <div id='GoToDown'/>

Biar lebih jelas, silahkan simpan isyarat javascript dan pemanggilnya di atas isyarat </body> ibarat berikut:

 <script type='text/javascript'>
 $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;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'/>
 

Selesai... Selamat mencoba. Untuk live demonya silahkan coba tombol go to down dan back to top di blog ini.

Untuk tombol go to down ini aku belum berhasil menambahkan dampak bounce ibarat pada tombol back to top, nanti kalau sudah dapat akan aku sharing lagi.

Referensi: https://komporajaibku.blogspot.com//search?q=membuat-tombol-back-to-top-dengan

Sumber https://www.kompiajaib.com/

Share this post