本文探讨了两种实现页面内平滑滚动的方法：通过HTML的<a>标签和JavaScript的scrollIntoView方法。使用<a>标签会改变URL，而scrollIntoView则能保持URL不变并实现平滑滚动，但其浏览器兼容性问题需要注意。通过CSS的scroll-behavior属性可以改善滚动体验，但并非所有浏览器都支持。在选择实现方式时，需根据目标用户的浏览器兼容性进行权衡。
1.通过a标签实现
<a>元素(或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接。
<body>
<div id="header"></div>
<a href="#header" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>
但是，通过<a>标签href实现的锚点，会改变url带上锚点路径，如下：
2.通过scrollIntoView实现
element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内；使用锚点时不会改变url请求地址，同时还很平滑的滑动到锚点的位置，但是兼容性不友好。
<body>
<div id="header"></div>
<a style="position:fixed;right:0;bottom:0" @click="clickAnchor()">回到顶部</a>
</body>
clickAnchor() {
document.getElementById('header').scrollIntoView(true);
}
使用上述代码后，不会改变url的路径了，但是会非常生硬地直接回到了顶部。
我们可以通过CSS的新属性behavior: "smooth"来平滑滚动页面。
clickAnchor() {
document.getElementById('header').scrollIntoView({ behavior: "smooth" });
}
虽然实现了平滑滚动到页面顶部，但是scrollIntoView并不是所有浏览器都兼容的。
看一下这个css属性scroll-behavior在各大浏览器中的支持情况。
上图我们可以看到，scrollIntoView对于很多浏览器是不兼容的，所以这个原生方法的使用还是需要看情况而定的。
扫一扫
1766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
