动画滚动到页面指定位置

方法一

/**
 * @param { Number } currentY 当前位置
 * @param { Number } targetY 目标位置
 */
 export function scrollAnimation(currentY, targetY) {
    // 获取当前位置方法
    // const currentY = document.documentElement.scrollTop || document.body.scrollTop
    // 计算需要移动的距离
    let needScrollTop = targetY - currentY
    let _currentY = currentY
    setTimeout(() => {
        // 一次调用滑动帧数，每次调用会不一样
        const dist = Math.ceil(needScrollTop / 10)
        _currentY += dist
        window.scrollTo(_currentY, currentY)
        // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
        if (needScrollTop > 10 || needScrollTop < -10) {
            scrollAnimation(_currentY, targetY)
        } else {
            window.scrollTo(_currentY, targetY)
        }
    }, 20)
}

方法二

/**
 * 
 * @param {*当前节点选择器} current
 * @param {*目标节点id} target 
 */
export function scroll(current,target){		//页面滚动
    const scrollPart = document.getElementById(target);
    const top = scrollPart.getBoundingClientRect().top; //元素（比如某个div）距离可视区域顶部的距离
    
    const pageY = document.querySelector(current).scrollTop;
    const endPosition = top + pageY-100;

    const startTime = +new Date();
    const duration = 500; //ms
    function run() {
        const time = +new Date() - startTime;				
        document.querySelector(current).scrollTo(0, pageY + top * (time / duration)-80);
        run.timer = requestAnimationFrame(run);

        if (time >= duration) {
            document.querySelector(current).scrollTo(0, endPosition);
            cancelAnimationFrame(run.timer);
        }
    } 
    requestAnimationFrame(run);
}