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

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

猜你喜欢

转载自blog.csdn.net/qq_32184753/article/details/128832432