刷新后滚动页面到顶部/中部/页脚

文章正文还需 2 分钟

简单，我们添加了我们的 html 标签引用，你想滚动页面。例如

js 复制代码

< div class="top" ref="goToTop"> ... < /div >
or
< div class="middle" ref="goToMiddle"> ... < /div >
or
< div class="footer" ref="goToFooter"> ... < /div >

在 vue.js 中处理

js 复制代码

//定义方法
scrollToElement(ref) {
    window.scrollTo(0,0);
    this.$scrollTo(ref, 1000);
},

// 如果想在刷新之后调用

mounted() {
     this.scrollToElement(this.$refs.goToTop);
}, 

// 点击滚动
onclickMethod() {
     this.scrollToElement(this.$refs.goToTop); 
},

滚动页面到指定位置实现
方法1：

js 复制代码

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

方法2：

js 复制代码

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
})

方法3：

js 复制代码

document.getElementById("target").scrollIntoView();

避坑指南：

方法1， 滑动至的元素不能是display:none，存在兼容问题，亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2， 未亲测过，但在this.$nextTick(()里执行滑动，感觉有点麻烦。

方法3， 亲测可用，ios和android都可。只是要注意，如果页面有监听scroll事件，scrollIntoView也会触发scroll事件的

以上来自csdn