Vue中滚动页面回到指定位置

方法1:

// 可以用来获取top值
// 可以不用加单位,这样写的话就是让滚动到什么位置
 document.documentElement.scrollTop = 300

方法2:

//先获取目标位置距离
mounted() {
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('box');
        //在data中定义
        this.target= targetbox.offsetTop;        
   })
  })
}
//再滑动指定距离
document.body.scrollTop = this.target;

方法3:
scrollTo,scrollBy,scroll滚动到某位置

this.$nextTick(() => {
	//获取的DOM元素不能为display:none
	//一定要加this.$nextTick 这样才可以事实更新 
     this.$refs.DOM.scrollTo(0,200);
       //x 和 y 的 设定位置
})
//但在this.$nextTick(()里执行滑动,感觉有点麻烦 我还没有使用过

方法4:

document.getElementById("box").scrollIntoView();
//找到元素 scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内

方法5:

 scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }

猜你喜欢

转载自blog.csdn.net/SANJIN0527_/article/details/107822948