回到顶部功能的实现

发表于 | 分类于 |

html代码

1
2
3
<a href="javascript:scrollTo(0, 0)" class="scroll-top">
	<img src="${ctx}/static/app/images/top.png" width="40" height="40"/>
</a>

css样式

1
2
3
4
5
6
7
.scroll-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99999;
    display: none;
}

js控制

1
2
3
4
5
6
7
8
9
$(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= 300) { //向下滚动像素大于这个值时，即出现浮窗~
            $('.scroll-top').fadeIn(1000);
        } else {
            $('.scroll-top').fadeOut(1000);
        }
    });
});