js实现元素滚动到目标容器头部

使用场景

在容器存在滚动条,并且需要通过点击将元素显示在目标容器顶部(不是window)

基本使用

changeElementPosition(id) {

      let target = document.getElementById(id); //移动元素

      let container = document.getElementById('container '); //目标元素

      // 获取目标元素相对于容器的顶部位置

      let targetRect = target.getBoundingClientRect();//获取相对于window可视区顶部距离

      let containerRect = container.getBoundingClientRect();//获取相对于window可视区顶部距离

      console.log(container.scrollTop); //滚动条位置 每次移动相对于滚动条现有位置移动

      // 计算滚动距离(相对滚动条位置计算)

      let scrollDistance = container.scrollTop + targetRect.top - containerRect.top;

        //滚动到目标位置(无动画效果)

        container.scrollTop=scrollDistance

     

        // 滚动到目标位置(动画效果)

      // this.smoothScrollToTop(container.scrollTop, scrollDistance, 500,container);

    },

动画函数

看自己需求使用,在基本使用中调用,默认注释

       //动画函数

   smoothScrollToTop(startp, endp, duration = 500,container) {

      let start = startp;

      let end = endp; // 滚动到顶部

      let distance = end - start;

      let startTime = 'now' in window.performance ? performance.now() : new Date().getTime();

      // 动画函数

      function animation(currentTime) {

        currentTime = currentTime || 'now' in window.performance ? performance.now() : new Date().getTime();

        let timeElapsed = currentTime - startTime;

        let run = Math.easeInOutQuad(timeElapsed, start, distance, duration);

        container.scrollTop = run;

        if (timeElapsed < duration) requestAnimationFrame(animation);

      }

      // 缓动函数，这里使用二次缓动（先加速后减速）

      Math.easeInOutQuad = function (t, b, c, d) {

        t /= d / 2;

        if (t < 1) return (c / 2) * t * t + b;

        t--;

        return (-c / 2) * (t * (t - 2) - 1) + b;

      };

      // 开始动画

      requestAnimationFrame(animation);

    },