vue 滚动条滚动到顶部或者底部

双手依舞

已于 2023-02-01 13:44:45 修改

阅读量1.2w

点赞数 7

文章标签： vue.js 前端 javascript

于 2023-02-01 13:43:47 首次发布

本文链接：https://blog.csdn.net/qq_32184753/article/details/128832432

版权

在Vue.js中，通过给滚动条所属的div添加ref属性，结合$refs可以实现点击事件跳转到顶部或底部的功能。关键在于div需设置overflow:auto，然后在点击事件中使用scrollTo方法平滑滚动。

摘要由CSDN通过智能技术生成

1:在滚动条所属 div 上加上 ref=“mianscroll” (mianscroll名称随意起)

<div ref="mianscroll">
  //中间内容
</div>

2:点击事件到顶部

topScrollClick() {
   this.$nextTick(() => {
     let scrollEl = this.$refs.mianscroll;
     scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
   });
 },

3:点击事件到底部

bottomScrollClick() {
      this.$nextTick(() => {
        let scrollEl = this.$refs.mianscroll;
        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'smooth' });
      });
}