X
X
X
Website Search®
X
Blog Archive®

❖ Scroll To Top Animation

CSS

#scrolltoTop {
text-align:center;
position:fixed;
bottom:15px;
right:80px;
cursor:pointer;
display:none;
}

Letakkan kode CSS di atas tepat sebelum kode ]]></b:skin>

JavaScript

<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/AVvXsEgPpF84TaJlZyKSlTh_K4JP7FuoWiO_kclIBv9a9Z2y8l9nbfi9m5gg5Y9FQYDg5eaJCdLYYOEzoEyYy-TuogvVA0iQUswM3b2ykmJrnHOTqLBz8AEqAaRwF_941co8uOMr0GJsFDBoOe-c/s1600/Button-Upload-icon.png' title='Back To Top' />
</div>

Letakkan kode HTML di atas tepat sebelum kode </body>

X

Posting Komentar