Vue项目中实现描点跳转scrollIntoView的案例_vue.js_

联系我们   
     跳转内容 

//需要让页面滑动到指定位置 //首先给元素添加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);

element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop);// Boolean型参数 element.scrollIntoView(scrollIntoViewOptions);// Object型参数

showDatePicker(){   if (this.$refs.pickers) {         this.$nextTick(() => {           this.$refs.pickers.showCurrentDate()         })       }

  showCurrentDate() {       this.$el.querySelector('.active').scrollIntoView({         block: 'start',       }) // 回到顶部     },