Sudah tahu scroll to top kan? Sebuah tombol untuk menggulung (scroll) layar kembali ke atas. Jadi, ketika Anda sudah sampai di bagian bawah ...
Sudah tahu scroll to top kan? Sebuah tombol untuk menggulung (scroll) layar kembali ke atas. Jadi, ketika Anda sudah sampai di bagian bawah (paling bawah) sebuah halaman web tombol ini akan muncul.
Letakkan kode CSS di atas tepat sebelum kode
Letakkan kode JavaScript di atas tepat sebelum kode
Letakkan kode HTML di atas tepat sebelum kode
#scrolltoTop {
text-align:center;
position:fixed;
bottom:15px;
right:80px;
cursor:pointer;
display:none;
}
Letakkan kode CSS di atas tepat sebelum kode
]]></b:skin>
<script type='text/javascript'>
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scrolltoTop').fadeIn();
} else {
$('#scrolltoTop').fadeOut();
}
});
$('#scrolltoTop> img').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800).animate({
scrollTop: 25
}, 200).animate({
scrollTop: 0
}, 150).animate({
scrollTop: 10
}, 100).animate({
scrollTop: 0
}, 50);
});
});
</script>
Letakkan kode JavaScript di atas tepat sebelum kode
</head>
HTML
<div id='scrolltoTop'>
<img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_TBwYaGYx4KgjuPdamIp5CcR3E5RUermnr2KQKbmCRNtN6UHx61sfwOyedOa0RQ1GmWyrfE36jn4_O1UvBZ7G6dU01uNKaShhMCuwtY2kULHx2GHBSuWzL6q4pwKgQBjPGuYHfEGwNzR/s1600/Button-Upload-icon.png' title='Back To Top' />
</div>
Letakkan kode HTML di atas tepat sebelum kode
</body>
Pastikan Anda sudah menambahkan jQuery di dalam template.
COMMENTS