联系我们
跳转内容
//需要让页面滑动到指定位置
//首先给元素添加id属性或其他可以获取元素的属性
//通过scrollIntoView方法实现页面跳转
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
//可选
alignToTop:boolean值类型
true:默认值。元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false:元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
//可选
scrollIntoViewOptions :
behavior :定义动画过渡效果,值为auto或smooth。
block :定义垂直方向的对齐,值为start/center/end/nearest。
inline :定义水平方向的对齐,值为start/center/end/nearest。
//实例
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
联系我们
methods: {
// 跳转到页面
goButtom() {
document.getElementById("about").scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start", // 上边框与视窗顶部平齐。默认值
});
},
},
------------------------------------------二------------------------------------------
需要移动到的位置
//选中id
document.getElementById(e).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
// 选中ref
this.$refs.pronbit.scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
//要是放在mounted()里执行使用
this.$refs.pronbit.scrollIntoView();//不然只执行一次刷新了也一样
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);
页面更新:2024-05-19
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号