首页 前端知识 js:scroll平滑滚动页面或元素到顶部或底部的方案汇总

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

2024-02-05 11:02:06 前端知识 前端哥 168 394 我要收藏

目录

    • 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. [前端]通过图片懒加载引出来的知识点
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1304.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!