点击某个链接,打开新的页面后滚动到固定位置--scrollIntoView

72 阅读1分钟

1、比较常见的是在某个页面中,点击回到顶部按钮后,页面滚动到页面最上方的位置,这个可以通过window.scrollTo(0, 0)的方式实现,现在有一个场景,在某个页面中点击对应的按钮,window.open打开一个新的窗口,并滑动到对应元素的位置上。

2、可采用scrollIntoView的方式实现

用法:

element.scrollIntoView();    // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop);    // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions);   // Object 型参数
alignToTop:
- 为`true`,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`。这是这个参数的默认值。
- 为`false`,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的`scrollIntoViewOptions: {block: "end", inline: "nearest"}`
scrollIntoViewOptions(可选):
`behavior` (可选):定义动画过渡效果,`"auto"`或 `"smooth"` 之一。默认为 `"auto"``block`(可选):定义垂直方向的对齐,`"start"``"center"`,`"end"`, 或 `"nearest"`之一。默认为 `"start"``inline`(可选):定义水平方向的对齐,`"start"`,`"center"`,`"end"`, 或 `"nearest"`之一。默认为 `"nearest"`

3、实例 其中,getQueryString('type')函数是获取window.location.url携带的type值 image.png image.png

image.png