hash应用:点击按钮自动滚动到特定高度

需求描述

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

思路

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

代码实现

最终效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。