saat kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.
Kode CSS nya:
#Back-to-top {
text-align: center;
z-index: 9999;
position: center;
bottom: 70px;
cursor: pointer;
display: none;
opacity: 0.7;
}
#Back-to-top:hover {
opacity: 1;
}
Pasang script ini di dalam setelah </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>
Letakkan kode html ini di body
<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMk4xETKpqOMexP_6PVD9dij6sYVWyQvmBZDaBnQ9GeTQTeJOqg035qgrSWnlFHLuI2vgZekjglo5cpg4vxI-e4cz6yrGIH0cU1FMJ7eOrj5t7Dmq6VbRwy19bmxSi3BSxXdE3RNvOYKt/s128/backtotop.png'/>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {
if($(this).scrollTop()>400) {
$('#Back-to-top').fadeIn();
}
else { $('#Back-to-top').fadeOut();}
});
$('#Back-to-top').click(function() {
$('body,html')
.animate({scrollTop:0},300)
.animate({scrollTop:40},200)
.animate({scrollTop:0},130)
.animate({scrollTop:15},100)
.animate({scrollTop:0},70);
});
});
</script>
Tidak ada komentar:
Posting Komentar