需求描述
最近在做一个手机端的项目,遇到一个需求:一个页面顶端有四个tab,分别对应页面中某一段内容。点击tab的时候页面会自动滚动到对应的内容区。如图,如果点击按钮3,页面会滚动到下方内容3的块。内容1和内容2的块会被滚动视图上方。

思路
一开始我的想法是获取每个内容相对于文档顶部的高度,但是想到不同手机的兼容性和获取高度带来的性能问题,没有尝试。后面发现a标签的hash原来就可以实现,只要将按钮设置成a标签,a标签的href与div的id一一对应,点击标签的时候便会自动将内容定位在屏幕中间,无需多余的代码和计算,非常方便。
代码实现

最终效果

网友评论