Menambahkan Tombol Go To Down Pada Tombol Back To Top

Menambahkan Tombol Go To Down
Untuk menjawab pertanyaan dari sista Cindy Nailla, saya mencoba menambahkan sedikit kode lagi pada script back to top dari Kang Ismet yang menggunakan efek bounce untuk membuat tombol go to down.

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

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


Setelah Anda memasang tombol Back To Top tersebut kini tinggal menambahkan tombol Go To Down. Silahkan tambahkan kode CSS untuk tombol go to down di bawah ini dan simpan di atas 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:&quot;&quot;; 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:&quot;&quot;; 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:&quot;&quot;; 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 kode di bawah ini pada javascript back to top dari Kang Ismet yang menggunakan efek bounce:


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

Sehingga setelah ditambahkan akan menjadi seperti 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 tepat di bawah pemanggil back to top (<div id='BounceToTop'/>) kode pemanggil ini berada tepat di bawah kode javascript.


<div id='GoToDown'/>

Biar lebih jelas, silahkan simpan kode javascript dan pemanggilnya di atas kode </body> seperti 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 saya belum berhasil menambahkan efek bounce seperti pada tombol back to top, nanti jika sudah bisa akan saya sharing lagi.

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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments