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


Dilarang Copy-Paste artikel di blog ini dan apabila kami menemukan artikel dicuri tanpa mencantumkan sumber link blog Amplopcokelat.com maka tak segan akan kami laporkan !

Berlangganan artikel Gratis langsung via email...

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar