jQuery实现回到顶部

当一个页面的内容比较长时,一般都在页面的右下角的固定位置有个“回到顶部”的按钮,点击后,页面的滚动条逐渐回滚到顶部,本篇来描述一个它的实现过程。
首先,需要有一个按钮

1
2
3
<button id="btn_top" title="回到顶部">
回到顶部
</button>

然后给这个元素定位到右下角,我们使用position:fixed。下面这个按钮加一些最基本的样式

1
2
3
4
5
6
#btn_top {
position: fixed;
bottom: 10px;
right: 10px;
display: none;
}

此时,这个按钮并没有显示出来,我们需要当页面的滚动条距离最上方有50个像素时,显示“回到顶部”按钮,通过jQuery来实现

1
2
3
4
5
6
7
8
9
10
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('#btn_top').fadeIn();
}
else {
$('#btn_top').fadeOut();
}
});
});

 
最后,我们给“回到顶部”的按钮添加一个click事件,通过一个动画来让滚动条滚到最上面

1
2
3
$('#btn_top').click(function () {
$('html,body').animate({ scrollTop: 0 }, 500);
});

 

坚持原创技术分享,您的支持将鼓励我继续创作!