当页面长度较长时,常常需要在页面的左侧或右侧放置一个按钮,让用户能方便地回到顶端去。单纯地使用<a>标签直接跳转到网页内部某个锚的方式过于激进,用户难以掌握当前内容与跳转目的内容间的关系。本文使用简短的JS代码,展示了如何平滑移动到目的位置。

Step 1:在页面右下角固定一个div

假定有一个id为rocket的div:

1
2
<div id="rocket">
</div>

将其position属性设置为fixed,并且设置其bottomright属性到合适的位置:

1
2
3
4
5
6
7
8
#rocket {
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
background: blue;
}

这里为了方便查看,设置了其高度和宽度,并设置其背景色为蓝色。

Step 2: 设置点击滚动事件

这里使用jQueryanimate来实现滚动效果的动画,设置scrollTop0让页面滚动到顶端:

1
2
3
4
5
$("#rocket").click(function() {
$("html, body").animate({
scrollTop: 0
}, 500);
});

这里同时选取htmlbody是为了兼容各个版本的浏览器:webkit内核的浏览器使用body进行滑动,而其他浏览器则使用html进行滑动。

Step 3: 控制rocket的显示与隐藏

有时候,当页面长度本身不长;或者用户并没有浏览太多内容,仍然停留在页面顶部的时,依旧显示滚动到顶端就显得很多余。可以通过在window对象scroll事件里监视scrollTop的值来控制rocket的显示与隐藏:

1
2
3
4
5
$(window).scroll(function() {
$(window).scrollTop() > 300
? $("#rocket").addClass("show")
: $("#rocket").removeClass("show");
});

扩充rocket的CSS样式如下:

1
2
3
4
5
6
7
8
#rocket {
...
visibility: hidden;
}
#rocket.show {
visibility: visible;
}

到此,滚动到顶部的功能已经基本完成了,这里给出实现整个功能的完整代码:

Extra Step: 滚动到页面特定位置

如果现在希望点击rocket,移动到页面的特定位置,该如何实现呢?很简单,只要设置animatescrollTop的值为页面特定元素的在整个文档中的偏移就可以了。jQueryoffset函数很方便地实现了我们需要的功能:

1
2
3
4
5
$("#rocket").click(function() {
$("html, body").animate({
scrollTop: $("#peom2").offset().top
}, 500);
});

移动到特定位置的完整代码如下:

总结

在内容较长的页面的特定位置设置便捷的链接会极大地提高用户的体验。本文通过简单地代码,给出了实现平滑滚动到特定位置的解决方案。可以使用CSS3的transition属性来进一步优化速率曲线,并在原来的基础增加更多的动画效果来增强用户体验。阅读到这儿,相信你已经看到了本文右下角的回到顶端的小火箭了,感兴趣地话可以研究一下。