<a href="javascript:void(0);" @click="handleTab('index')">首页</a>
methods:{
handleTab(id){
document.getElementById(id).scrollIntoView()
}
}
scrollIntoView()的用法
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数
alignToTop
一个Boolean值:
-
如果为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"。
示例
element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});