页面滚动到指定位置的方法

视口中可显示的信息是有限的，因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式：

纯html实现（锚点）

• 跳转按钮：点击跳转当前页面指定锚点
• 设置锚点：a标签锚点、

  id锚点

分析：当点击a标签就会跳到锚点处，没有缓冲效果，体验一般，而且url里会添加"#anchorName"。这在SPA应用里是会影响路由配置。刷新页面并不会定位到锚点。

js辅助（window.scrollTo方法）

借助window.scrollTo({ top,left ,behavior})方法。

举个例子：点击按钮视口调整到某元素的上方。

• 先获取该元素到文档顶部的距离，offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离。
• 通过循环的方式累加来获取距离文档最顶部的距离

function heightToTop(ele){
    //ele为指定跳转到该位置的DOM节点
    let root = document.body;
    let height = 0;
    do{
        height += ele.offsetTop;
        ele = ele.offsetParent;
    }while( ele !== root )
    return height;
}
//某按钮点击时
someBtn.addEventListener('click',function(e){
    window.scrollTo({
        top:heightToTop(e.target),
        behavior:'smooth'
    })
})

两行方法适用不同的场景，仁者见仁智者见智吧！

over

感谢阅读！