jQuery 实现平滑返回顶部效果
在浏览一个页面很长的时候，当用户已经往下滚动了一段距离后，为了更好的用户体验，一般会在右下角增加一个【返回顶部】的按钮，以便让用户在需要的时候更快更方便的回到页面顶部。这种效果使用 jQuery 应该如何制作呢？
1、首先，准备一个按钮。
<div id="to-top" class="to-top" title="返回顶部">
<img src="images/to-top.png" alt="">
</div>
2、使用 CSS 把这个按钮固定在右下角，并先把他隐藏，因为一开始页面就是在顶部，不需要这个按钮。
.to-top {
display: none;
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
background-color: #333;
cursor: pointer;
}
.to-top img {
width: 48px;
height: 48px;
}
3、使用 JavaScript 监视滚动距离，当用户滚动到设定的距离时就显示按钮，反之则隐藏按钮。
$(document).on('scroll', function() {
var $pageScrollTop = $(this).scrollTop()
if ($pageScrollTop > 200) {
$('#to-top').show()
} else {
$('#to-top').hide()
}
})
4、为按钮添加点击事件，当用户点击按钮的时候，就让页面滚动到底部，这是关键的地方，animate 是以平滑（动画）的方式把页面的滚动距离 scrollTop 设置为 0，这样就达到了我们想要的效果，具体代码如下：
$('#to-top').on('click', function() {
$('html, body').stop().animate({
scrollTop: 0
})
})
5、完整的 js 代码如下：
$(function() {
$(document).on('scroll', function() {
var $pageScrollTop = $(this).scrollTop()
if ($pageScrollTop > 200) {
$('#to-top').show()
} else {
$('#to-top').hide()
}
})
$('#to-top').on('click', function() {
$('html, body').stop().animate({
scrollTop: 0
})
})
})
到这里就制作好了，是不是很简单，点击右边的【查看演示】看看效果吧。
标签：返回顶部
