滚动条实现刷新回到顶端效果及常见问题

Vue滚动条重置：el-dialog问题与解决方案

最新推荐文章于 2025-09-07 23:18:05 发布

原创最新推荐文章于 2025-09-07 23:18:05 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

文章讲述了在Vue应用中，如何处理el-dialog弹框关闭后滚动条位置的问题，包括使用`scrollToTop`方法、设置元素滚动到顶部，以及针对弹框关闭动画结束时的处理策略。

方式一：id

<div id='contentId'>
    ....
</div>


munted(){
    this.scrollToTop()
},

methods:{
    scrollToTop(){
        decument.getElementById('contentId').scrollTo(0,0)
    }
}

方式二：ref

<div ref='contentRef'>
    ......
</div>

munted(){
    this.scrollToTop()
},

methods:{
    scrollToTop(){
        this.$ref.contentRef.$el.scrollTo(0,0)
    }
}

常见问题：

弹框类型的滚动条，在弹框关闭再次打开时还是历史位置：解决方法是el-dialog弹框获取到使页面撑开产生滚动条的元素给他设置scrollToTop方法实现代码复原滚动条，另外一个方法是将弹框的所有数据初始化（清空）

如果还不能解决，需要将函数在关闭el-dialog的close函数中调用，而不是closed函数中，因为el-dialog的close函数是在弹框关闭的时候调用，而closed函数是在弹框关闭动画结束时调用