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，如果没有则使用setTimeOut
    if (!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、参考文章

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

	<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>

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

	scrollIntoView()
	scrollIntoView(alignToTop)
	scrollIntoView(scrollIntoViewOptions)