jQuery 实现平滑返回顶部效果

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

到这里就制作好了，是不是很简单，查看效果：https://www.dowebok.com/demo/9651/index.html