页面滚动到指定位置——js中scrollIntoView()的用法

最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置。

如图:
在这里插入图片描述
如果是我写的话,我可能会先获取滚动到的元素,然后获取此元素距离页面顶部的距离,然后通过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)就可以解决了。

完成!!!

猜你喜欢

转载自blog.csdn.net/yehaocheng520/article/details/124924288