简单的页面内滑动跳转实现方法

具体实现原理

• 获取当前视口顶端距离页面顶端的距离 window.scrollY 记录此处，设置为滑动起始位置。
• 获取要跳转到元素的的top值 目标元素.offsetTop。
• 目标元素.offsetTop - window.scrollY 为移动的距离。
• 开启定时器将整个过程分成若干次，到达动画滑动的效果。

具体实例

let oNava = document.querySelectorAll("nav>ul.navlist>li>a");
        for(let i=0;i<oNava.length;i++){
            oNava[i].onclick=function(event){
                //阻止a标签默认刷新页面事件
                event.preventDefault();
                //目标位置
                let toNavaEleTop = document.querySelector(event.currentTarget.getAttribute("href")).offsetTop;
                let targetTop = toNavaEleTop - 120;  //u优化视觉效果；
                // 获取当面视口的顶端距离页面顶端Top值
                let currentTop = window.scrollY;
                let num = 25; //分25次完成
                let time = 500 / num;  //设置总时间为50 ms,每次时间为time
                let v = (targetTop - currentTop) / num; //每次移动路程
                let i = 0;
                console.log(currentTop)
                let timer = setInterval(()=>{
                    if(i>num){
                       window.clearInterval(timer)
                       return
                    }
                    i++
                    window.scrollTo(0,currentTop+v*i)
                },time)
             }
        }
复制代码

以上为一种简单的实现方法(待补充其他改进方法)