Morning guys. Tahukah kamu bahwa terkadang beberapa orang bosan harus mengscroll halaman web.
Maka dari itu disini saya membuat sebuah option button yang berfungsi unuk mengembalikan kita keatas halaman page web.Tombol Back To Top yang biasanya berupa gambar panah menuju keatas yang terletak dibawah sebuah website atau blog merupakan salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page. Dengan Membuat Tombol Back To Top (Kembali Ke Atas) sangat membantu untuk bergerak cepat kembali pada artikel yang diatas, sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse. langsung saja pahami beberapa kode dibawah. :D
kode HTML
copy dan paste kode berikut diantara <html> dan <head>
like this.
<html lang="en">
<div id="ScrollToTop"style="display: none;">
<a><img alt="Back to top" src="img/totop.png" width="50px" height="50px" title="Back to Top"/></a>
</div>
<head>
* tulisan warna merah adalah gambar/image back to top.
lalu copy dan paste kode berikut kedalam <head> HTML
like this.
<style type='text/css' scoped='scoped'>
#ScrollToTop{
text-align:center; position:fixed; bottom:5px; right:5px; display:none;
}
</style>
<script type='text/javascript'>
$(function(){
$(window).scroll(function(){
if($(this).scrollTop()>100){
$('#ScrollToTop').fadeIn();
}else{
$('#ScrollToTop').fadeOut();
}
});
$('#ScrollToTop').click(function(){
$('html,body').animate({scrollTop:0},1000);
return false
})
});
</script>
</head>
Semoga bermanfaat. :D
0 komentar:
Posting Komentar