Pasang Tombol Go To Down Pada Tombol Back To Top

Kode Iklan Di Sini
Pasang Tombol Go To Down Pada Tombol Back To Top

Pasang Tombol Go To Down Pada Tombol Back To Top

Sebelumnya saya sudah share tips " Pasang Tombol Smooth Scroll Back To Top dengan jQuery di Blogspot" .
Nah kali ini, saya ambil tips dari Kompi Ajaib dimana denga menambahkan 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 perlu membaca tips berikut ini, simak bai-baik :
Cara Pasang atau Membuat Tombol Back To Top Dengan Before And After

Jika Anda sudah memasang tombol Back To Top tersebut, kini tinggal menambahkan tombol Go To Down.

Langkah pemasangan :

1. Tambahkan kode CSS untuk tombol go to down di bawah ini dan Anda taruh/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;} 

2. 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()
}); 


3. Jika di gabungkan maka 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> 



4. Anda tambahkan kode 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'/>
 

5. Untuk lebih lengkapnya, 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'/> 


6. Selamat mencoba, dan semoga berhasil ^_^ !!

sekian artikel Pasang Tombol Go To Down Pada Tombol Back To Top

Referensi: http://www.kompiajaib.com/2014/02/menambahkan-tombol-go-to-down-pada.html


You Might Also Like:

Disqus Comments