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);
        });
    });
});