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

2021年08月30日 22:19 · 阅读 1471

通常一个完整的页面可包含多屏内容，因此我们常需要通过滚动页面来阅读网页上的内容。页面上有一些可点击的链接或按钮，点击后调转到页面指定的位置，今天介绍几种实现方式。

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

纯html实现（锚点）

一般包含两块：

锚点
锚定物

<a href="#anchorName">点击跳转当前页面指定锚点</a>
<a name="anchorName">name锚定物</a>
<p id="anchorName">id锚定物</p>
复制代码

效果：当点击第一个a标签时，页面的顶端会滚动到后面a标签的位置。特点是：滚动过程没有缓冲效果，体验一般，而且url里会添加"#anchorName"。这在SPA应用里是可能会污染路由。所以原生的方式可能不是最佳的处理方式，当然优点是比较简单。

js辅助（window.scrollTo方法）

语法：

window.scrollTo(options)
options:{
    left:number,
    top:number,
    behavior:"smooth"|"instant"
}
复制代码

来个需求：点击按钮将某元素滚动到屏幕的上方。

分析有以下几步：

先获取该元素到文档顶部的距离，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'
    })
})
复制代码

注意：window.scrollTo只能改变最外层容器的滚动距离。如果你页面上潜逃了一个div，该div有自己的滚动距离，则不会受到影响。

scrollTop属性

通过设置scrollTop属性来直接更改容器的滚动距离。

设置最外层可滚动容器的滚动距离：document.documentElement.scrollTop = 100
当页面最外层的滚动容器潜逃有滚动容器时：HTMLElement.scrollTop = 100


//某按钮点击时
someBtn.addEventListener('click',function(e){
    const heightToTop = heightToTop(e.target);
    document.documentElement.scrollTop = heightToTop;
})
复制代码

最后

最后，感谢阅读！