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

·  阅读 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;
})
复制代码

最后

最后,感谢阅读!

分类:
前端