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' });
      });
}

注意点:一定要是给滚动条所属 div 添加如上方法,不然无法生效,滚动的 div 的样式是 overflow:auto

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐