js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

准备知识：

• scrollWidth: 是元素全部内容的宽度，包括由于overflow溢出而在屏幕上不可见的内容
• scrollHeight: 是元素全部内容的高度，包括由于overflow溢出而在屏幕上不可见的内容
• scrollTop: 纵向滚动条距离元素最顶部的距离
• scrollLeft: 横向滚动条距离元素最左侧的距离

1、CSS的scroll-behavior

语法

scroll-behavior: auto | smooth | inherit | unset

参数
- smooth：表示滚动很平滑，有过渡效果
- auto：没有过渡效果，一闪而过。

关键代码

html, body {scroll-behavior: smooth;
}

示例代码

<style>* {margin: 0;padding: 0;text-align: center;}html {scroll-behavior: smooth;}.btn {margin-bottom: 20px;}.box {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}
</style><div class="box" id="box">Box</div><a href="#box" class="btn">回到顶部</a>

在线演示：https://mouday.github.io/front-end-demo/scroll/scroll-behavior.html

可以通过js判断是否支持css scroll-behavior属性

function isSuportScrollBehavior() {return !(typeof window.getComputedStyle(document.body).scrollBehavior === 'undefined');
}

2、Element.scrollTop

设置属性scrollTop为元素的scrollHeight 即可滚动到元素底部，不过没有动画效果

示例

<style>* {margin: 0;padding: 0;text-align: center;}.btn {margin-top: 20px;}.box {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}
</style><button id="btn" class="btn">滚动到底部</button><div class="box">Box</div><script>// 滑动底部let btn = document.querySelector("#btn");btn.addEventListener("click", function () {document.documentElement.scrollTop = document.documentElement.scrollHeight;});
</script>

兼容性写法

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

在线演示：https://mouday.github.io/front-end-demo/scroll/scrollTop.html

3、Element.scroll()/Window.scroll()

scroll() 方法是用于滚动元素 到某个特定坐标

文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scroll

语法

scroll(x-coord, y-coord)
scroll(options)

参数

• x-coord 你想要显示在左上角的元素沿水平轴的像素。

• y-coord 你想要显示在左上角的元素沿垂直轴的像素。

• options

  • top: 指定沿 Y 轴滚动窗口或元素的像素数。
  • left: 指定沿 X 轴滚动窗口或元素的像素数。
  • behavior:
    • smooth 表示平滑滚动并产生过渡效果,
    • auto 或缺省值会直接跳转到目标位置，没有过渡效果。

示例

<style>* {margin: 0;padding: 0;text-align: center;}.btn {margin-top: 20px;}.box {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}
</style><button id="to-bottom" class="btn">滚动到底部</button><div class="box">Box</div><button id="tp-top" class="btn">滚动到顶部</button><script>// 滑动底部let toBottom = document.querySelector("#to-bottom");toBottom.addEventListener("click", function () {window.scrollTo({top: document.documentElement.scrollHeight,behavior: "smooth",});});// 滑动顶部let toTop = document.querySelector("#tp-top");toTop.addEventListener("click", function () {window.scrollTo({top: 0,behavior: "smooth",});});
</script>

在线演示：https://mouday.github.io/front-end-demo/scroll/scroll.html

4、Element.scrollBy()/Window.scrollBy()

scrollBy() 方法是使得元素滚动一段特定距离的 Element 接口。

使用方法同Element.scroll()/Window.scroll()

注意：scrollBy (回滚滚动条需要写负数，其它与scroll一致)

<style>* {margin: 0;padding: 0;text-align: center;}.btn {margin-top: 20px;}.box {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}
</style><button id="to-bottom" class="btn">滚动到底部</button><div class="box">Box</div><button id="tp-top" class="btn">滚动到顶部</button><script>// 滑动底部let toBottom = document.querySelector("#to-bottom");toBottom.addEventListener("click", function () {window.scrollBy({top: document.documentElement.scrollHeight,behavior: "smooth",});});// 滑动顶部let toTop = document.querySelector("#tp-top");toTop.addEventListener("click", function () {window.scrollBy({top: -document.documentElement.scrollHeight,behavior: "smooth",});});
</script>

在线演示：https://mouday.github.io/front-end-demo/scroll/scrollBy.html

5、Element.scrollTo()/Window.scrollTo()

Element 的 scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

使用方法同Element.scroll()/Window.scroll()

6、Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

参数

• alignToTop可选（布尔值）

  • true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
  • false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: “end”, inline: “nearest”}。

• scrollIntoViewOptions 可选 实验性

  • behavior 可选 定义动画过渡效果，auto 或 smooth 之一。默认为 auto。
  • block 可选 定义垂直方向的对齐，start(上)、center(中)、end(下) 或 nearest(距离最近的点) 之一。默认为 start。
  • inline 可选 定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

<style>* {margin: 0;padding: 0;text-align: center;}.btn {margin-top: 20px;}pre,code {text-align: unset;}.top {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}.box {margin-top: 20px;height: 200px;line-height: 200px;background-color: #eaffd0;}
</style><button id="btn" class="btn">滚动到Box</button><div class="top">TOP</div><div class="box">Box</div><script>let btn = document.querySelector("#btn");btn.addEventListener("click", function () {let top = document.querySelector(".box");top.scrollIntoView({block: 'start',behavior: "smooth",});});
</script>

在线演示：https://mouday.github.io/front-end-demo/scroll/scrollIntoView.html

7、自定义兼容性方案

可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案

<style>* {margin: 0;padding: 0;text-align: center;}.btn {margin-top: 20px;}.box {margin-top: 20px;height: 1500px;line-height: 1500px;background-color: #95e1d3;}
</style><button id="to-bottom" class="btn">滚动到底部</button><div class="box">Box</div><button id="tp-top" class="btn">滚动到顶部</button><script>// 封装一个回到底部或者顶部的函数function scrollToTop(position) {// 使用requestAnimationFrame，如果没有则使用setTimeOutif (!window.requestAnimationFrame) {window.requestAnimationFrame = function (callback) {return setTimeout(callback, 20);};}// 获取当前元素滚动的距离let scrollTopDistance =document.documentElement.scrollTop || document.body.scrollTop;function smoothScroll() {console.log('smoothScroll');// 如果你要滚到顶部，那么position传过来的就是0，下面这个distance肯定就是负值。let distance = position - scrollTopDistance;// 每次滚动的距离要不一样，制造一个缓冲效果scrollTopDistance = scrollTopDistance + distance / 5;// 判断条件if (Math.abs(distance) < 1) {window.scrollTo(0, position);} else {window.scrollTo(0, scrollTopDistance);requestAnimationFrame(smoothScroll);}}smoothScroll();}// 滑动顶部let toTop = document.querySelector("#tp-top");toTop.addEventListener("click", function () {// 回到顶部scrollToTop(0);});// 滑动底部let toBottom = document.querySelector("#to-bottom");toBottom.addEventListener("click", function () {// 滚到底部scrollToTop(document.documentElement.scrollHeight - window.innerHeight);});
</script>

在线演示：https://mouday.github.io/front-end-demo/scroll/smoothScroll.html

8、参考文章

1. JS滑动到页面顶部（或底部）
2. 2020-06-23原生js使dom自动滚动到最底部
3. s 中关于操纵 Element 进行滚动的方法，都在这了‍‍‍
4. 平滑滚动到顶部或底部的几种方案
5. 完美实现一个“回到顶部”
6. [前端]通过图片懒加载引出来的知识点