实现锚点-scroll平滑滚动

最新推荐文章于 2024-08-26 07:52:53 发布

visionke

最新推荐文章于 2024-08-26 07:52:53 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/visionke/article/details/96900660

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

a链接锚点定位太生硬？试试自己让滚动条平滑滚动把

  scroll2 =(target)=>{
    console.log('alb')
   console.log('滚动拉')
    target = target?target:'aaa'; //className
    const scrollPart = document.querySelector('.' + target); // 目标节点class
    const top = scrollPart.getBoundingClientRect().top - 60;//设置自己滚动的高度
    const pageY = window.pageYOffset;
    const endPosition = top + pageY;

    const startTime = +new Date();
    const duration = 500; //ms

    function run() {
        const time = +new Date() - startTime;

        window.scrollTo(0, pageY + top * (time / duration));
        run.timer = requestAnimationFrame(run);

        if (time >= duration) {
            window.scrollTo(0, endPosition);
            cancelAnimationFrame(run.timer);
        }
    } 

    requestAnimationFrame(run);
  }
//调用

scroll2('classNameA');