页面快速定位到指定位置的几个方法

最新推荐文章于 2024-12-30 12:04:39 发布

weixin_34232363

最新推荐文章于 2024-12-30 12:04:39 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java 开发工具 ViewUI

原文链接：https://segmentfault.com/a/1190000015338047

本文介绍如何在页面中实现按钮点击快速定位到指定位置，通过HTML锚点和CSS解决初步需求，但遇到按钮遮挡问题。文中详细讨论了两种解决方案：1) 使用:target CSS选择器调整定位，但可能影响布局；2) 添加辅助节点实现任意位置定位，优点是不会破坏布局。然而，移动端浏览器历史记录问题导致体验不佳，最终采用JavaScript监听并修改页面滚动位置，同时提到了使用offsetTop进行平滑滚动定位的更优方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。

需求分析

拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js

解法

想到使用锚点事情就比较简单了，借用a标签的href定位，很快就写了一个Demo，
完整代码：https://codepen.io/yangyang11...
关键代码：

<div id="content">
  <div class="btn-container">
    <a class="btn" href="#anchor1">锚点1</a>
    <a class="btn" href="#anchor2">锚点2</a>
    <a class="btn" href="#anchor3">锚点3</a>
  </div>
  <div id="anchor1" class="anchor-con">anchor1</div>
  <div id="anchor2" class="anchor-con">anchor2</div>
  <div id="anchor3" class="anchor-con">anchor3</div>
</div>

这时候，点击悬浮的button，页面可以实现快速定位。

坑1

点了几遍之后立马就发现了一个坑，因为按钮是悬浮的，而锚点定位，默认是定位到窗口顶端，这样定位到的区域就会有一部分被悬浮的按钮挡住

最低0.47元/天解锁文章

200万优质内容无限畅学