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

目录

• • 1、CSS的scroll-behavior
  • 2、Element.scrollTop
  • 3、Element.scroll()/Window.scroll()
  • 4、Element.scrollBy()/Window.scrollBy()
  • 5、Element.scrollTo()/Window.scrollTo()
  • 6、Element.scrollIntoView()
  • 7、自定义兼容性方案
  • 8、参考文章

准备知识：

• 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、参考文章

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