本文详细解析了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)
})效果如下图所示。
从效果来看，事件触发后页面会立即跳转至顶部。在交互要求不高的场景下，这种做法没有问题；但在高交互性要求下，这种瞬间跳转会显得较为突兀。
经建议，可在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 标签方案，该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" })
})效果如下图所示。
从效果上看，该API与scrollTo的作用一致，但从代码结构来看，scrollIntoView更为简洁，且在iframe中的表现也非常优秀，因此实际开发中被使用的频率更高。
以上三种方法是目前较为常用的实现方式。如需了解更多关于JS回到指定位置的内容，可搜索本站历史文章或继续浏览下方的相关文章，希望大家以后多多支持本站！