使某个dom元素匀速滑动到容器顶部

最新推荐文章于 2024-02-21 09:51:31 发布

haosicx

最新推荐文章于 2024-02-21 09:51:31 发布

阅读量464

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/haosicx/article/details/132018875

版权

需求

我有个侧面的菜单 , 点击对应的菜单标题, 可以让左侧的容易里对应标题滑到最顶上
于是我封装了一个缓动函数

这个函数接受3个参数

需要滚动的最外层的容器
滚动到什么距离
滚动时间

注意点

第一个参数的最外层的容器 , 需要滚动条( 没滚动条是没有办法滚动的 )
第二个参数是滚动的距离 , 其实也就是内部需要置顶的子元素的offsetTop ( 子元素距离顶部的距离 )
第三个参数可以不传,有默认值

smoothScrollToTop(element, targetScrollTop, duration = 500) {
      const startingScrollTop = element.scrollTop;
      console.log(startingScrollTop, "startingScrollTop11111");
      const startTime = performance.now();
      const scrollDistance = targetScrollTop - startingScrollTop;

      function animateScroll(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        const easeInOutQuad = (t) =>
          t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

        element.scrollTop =
          startingScrollTop + scrollDistance * easeInOutQuad(progress);

        if (progress < 1) {
          requestAnimationFrame(animateScroll);
        }
      }

      requestAnimationFrame(animateScroll);
    },

使用demo

直接复制保存html预览

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">我要让元素滑动置顶</button>
  <div id="box">
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1 id="top">需要置顶的元素</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
  </div>
</body>
<script>

  function smoothScrollToTop(element, targetScrollTop, duration = 500) {
    const startingScrollTop = element.scrollTop;
    const startTime = performance.now();
    const scrollDistance = targetScrollTop - startingScrollTop;

    function animateScroll(currentTime) {
      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / duration, 1);
      const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

      element.scrollTop = startingScrollTop + (scrollDistance * easeInOutQuad(progress));

      if (progress < 1) {
        requestAnimationFrame(animateScroll);
      }
    }
    requestAnimationFrame(animateScroll);
  }

  const btn = document.querySelector(`#btn`)
  btn.addEventListener(`click`, () => {
    const element = document.querySelector(`#top`)
    const offsetTop = element.offsetTop;
    smoothScrollToTop(box, offsetTop);
  })
</script>

</html>

<style>
  #btn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }

  #box {
    height: 500px;
    background-color: red;
    overflow: scroll;
    margin-left: 100px;
  }
</style>