HTML代码

1
2
3
<a href="#gotop" title="返回顶部">
<img th:src="@{/static/images/top2.png}" id="gotop" alt="" style="position: fixed;bottom: 10%;display: none;height: 40px;margin-left: 96%">
</a>

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//返回顶部图标出现或者消失
$(function () {
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#gotop").fadeIn(1000);//一秒渐入动画
} else {
$("#gotop").fadeOut(1000);//一秒渐隐动画
}
});

$("#gotop").click(function () {
$('body,html').animate({scrollTop: 0}, 1000);
});
});
});