最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置。
如图:
如果是我写的话,我可能会先获取滚动到的元素,然后获取此元素距离页面顶部的距离,然后通过scrollTop
来实现滚动。
此时也可以通过scrollIntoView
来实现。
element.scrollIntoView()
参数默认为true
1.什么是scrollIntoView
?
scrollIntoView
是一个与页面(容器)滚动相关的API
2.如何调用?
element.scrollIntoView() 参数默认为true
参数为true:调用该函数,页面发送滚动,使element的顶部与视图(容器)顶部对齐
参数为false:使element的底部与视图(容器)底部对齐
3.使用场景
有的元素在页面的不可见区域,这时候需要scrollIntoView()将其拖动到可见区域,代码如下:
document.getElementById('craft-point').scrollIntoView()
如果看到的情况是,定位到的元素的标题和浏览器顶部对齐了,效果不太好:
这时只要把scrollIntoView()
改成scrollIntoView(false)
就可以解决了。
完成!!!