当前位置：首页 > 全部内容 > JavaScript实现页面滚动到指定位置的三种方案

JavaScript实现页面滚动到指定位置的三种方案

作者：小圆点时间：2026-10-24 06:44:23浏览：271

本文详细解析了JavaScript中实现页面滚动至指定位置的三种常用方法。首先介绍通过动态创建和触发a标签的传统方案，其次讲解利用window.scrollTo API并配合smooth行为参数实现平滑滚动，最后推荐结构更简洁且对iframe支持更好的Element.scrollIntoView()方法。文章对比了各方案在交互体验、代码维护性及兼容性方面的差异，帮助开发者根据项目需求选择最佳实践。

以往在开发B端项目时，实现页面跳转至指定位置的需求通常直接利用 a 标签即可完成。如今转向C端开发，用户对交互体验的要求显著提高，仅靠 a 标签已无法满足需求，必须借助JavaScript来实现更灵活的滚动控制，在此对常用方案进行整理记录。

a 标签方案

首先展示相关的HTML结构。


<body>
  <contain class="test1">
    <a name="topAnchor"></a>
    <div id="top">我是顶部</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </contain>
  <footer>
    <button id="backTop1">第一种方式回到顶部</button>
    <button id="backTop2">第二种方式回到顶部</button>
    <button id="backTop3">第三种方式回到顶部</button>
  </footer>
</body>

具体操作步骤如下：

  • 将a标签放置在目标元素的附近。
  • 通过点击事件动态生成该 a 标签。
  • 触发a标签的点击事件以执行跳转。
  • 事件触发后，立即删除该a标签以清理DOM。

相关代码如下：


 const backTop1 = document.getElementById("backTop1")

  backTop1.addEventListener("click", function (e) {
    let a = document.createElement("a")
    a.href = "#topAnchor"
    e.target.appendChild(a)
    a.onclick = function (e) {
      e.stopPropagation()
    }
    a.click()
    e.target.removeChild(a)
  })

效果如下图所示。

a 标签方案

从效果来看，事件触发后页面会立即跳转至顶部。在交互要求不高的场景下，这种做法没有问题；但在高交互性要求下，这种瞬间跳转会显得较为突兀。

经建议，可在CSS中设置 html, body { scroll-behavior:smooth; }，这能达到与后续两个API中 behavior 参数设置为 smooth 相同的平滑滚动效果。

scrollTo() 方法

该API需要传递DOM元素相对于window的 left 和 top 坐标，本示例仅展示简单Demo，主要考虑 top 坐标。

此外，它还有一个 behavior 参数，将其设置为 smooth 后，页面滚动时将呈现平滑过渡效果。具体步骤如下：

  • 计算目标元素距离页面顶部的距离。
  • 通过事件触发滚动逻辑。

代码如下：


  const backTop2 = document.getElementById("backTop2")
  const TOP = document.getElementById("top")
  const y = TOP.offsetTop
  const backTop3 = document.getElementById("backTop3")
  backTop3.addEventListener("click", function (e) {
    window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
  })

效果如下图所示。

a 标签方案

从效果上看，相较于 a 标签方案，该API支持动画过渡，使页面滚动更加丝滑。不过需注意，它对iframe的支持度有限，若项目中iframe占比不小，请谨慎使用此方案。

Element.scrollIntoView() 方法

该API相较于前一种方式，节点信息更加明确，操作方法也更为简洁，更利于后续代码维护。

相关代码如下：


 const backTop2 = document.getElementById("backTop2")
  const TOP = document.getElementById("top")
  backTop2.addEventListener("click", function (e) {
    TOP.scrollIntoView({ behavior: "smooth" })
  })

效果如下图所示。

a 标签方案

从效果上看，该API与scrollTo的作用一致，但从代码结构来看，scrollIntoView更为简洁，且在iframe中的表现也非常优秀，因此实际开发中被使用的频率更高。

以上三种方法是目前较为常用的实现方式。如需了解更多关于JS回到指定位置的内容，可搜索本站历史文章或继续浏览下方的相关文章，希望大家以后多多支持本站！

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09