美文网首页
hash应用:点击按钮自动滚动到特定高度

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

作者: 楼顶吹吹风 | 来源:发表于2020-02-21 17:43 被阅读0次

需求描述

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

思路

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

代码实现

最终效果

相关文章

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

    需求描述 最近在做一个手机端的项目,遇到一个需求:一个页面顶端有四个tab,分别对应页面中某一段内容。点击tab的...

  • 自定义窗口漂浮按钮,可随便拖动

    按钮放置窗口上,用户可随便拖动按钮到任意的位置,当位置超出窗口的时候,按钮会自动移动到视图边缘,按钮移动到视图中间...

  • 点击状态栏栏scrollview自动回到顶部

    iOS自带功能,当前控制器只有一个scrollsToTop = yes时,点击状态栏就会自动滚动到顶部 在标题按钮...

  • CollectionView按钮联动

    CollectioView滚动到指定section的方法CollectionView按钮联动 实现1:点击按钮,C...

  • 处理视频旋转逻辑

    解决自动旋转和点击按钮旋转冲突问题(点击按钮旋转回退竖屏后,不能自动旋转) 答:其实只要在点击按钮旋转回竖屏时再加...

  • 联动效果及一些疑问

    联动是一个专业术语,点击按钮切换视图,滑动视图切换按钮,是一个特定的应用场景 实现起来分两个过程来做: 1.点击按...

  • jQuery点击锚点平滑滚动

    点击锚点平滑滚动到相应页面位置: .. "返回顶部"按钮效果:向下滚动页面出现 按钮,点击返回顶部。 …………EN...

  • ios UIWebView页面滚动到指定位置

    通常用UIWebView加载网页,有时候需要点击一个按钮,使页面自动滚动到顶部,或者指定位置,但是UIWebVie...

  • 滚动到某个特定元素 :scrollIntoView()

    比如点击左侧列表,右边滚动到特定小标题位置 这个真是超好用,不用获取右边小标题的高度,啥都不用,有id或者clas...

  • UIWebView加载网页点击回到顶部

    通常用UIWebView加载网页,有时候需要点击一个按钮,或者页面的某个部位,使页面自动滚动到顶部,但是UIWeb...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/egzcqhtx.html