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

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

纯html实现（锚点）

• 跳转按钮：<a href="#anchorName">点击跳转当前页面指定锚点</a>
• 设置锚点：<a name="anchorName">a标签锚点</a>、<p id="anchorName">id锚点</p>

分析：当点击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'
    })
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

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

over

感谢阅读！

                                </div>