首先需要弄清楚是最外层滚动条是哪种，目前常用2种：

• el-scrollerbar
• el-table

el-scrollbar滚动到指定的位置

el-scrollbar需要被包裹的可变层，高度设置为固定，且transaction需要放置在el-scrollbar里面

，这个组件的滚动条比原生的还是好看些的。

开始使用

<el-scrollbar>
  // 包裹你的内容
</el-scrollbar>

这个组件还有一个属性值可以传递，可以用来修改样式加一些class的类名，但是一般情况下不会用的太多。

props: {
  native: Boolean,
  wrapStyle: {}, // 外层盒子的样式
  wrapClass: {}, // 外层盒子的class
  viewClass: {}, // 内层盒子的class
  viewStyle: {}, // 内层盒子的样式
  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
  tag: {
    type: String,
    default: 'div'
  }
}

el-scrollbar将会作为你容器的最外层，也是滚动条的容器；
可以给el-scrollbar加上ref以及class来达到自己想要的结果。
特别需要注意的是：在el-scrollbar上定义maxHeight和maxWidth是不生效的，没有办法达到预期的一个效果

滚动到指定的位置

可以使用如下代码

this.$refs['scroll'].wrap.scrollTop = 0  //想滚到哪个高度，就写多少
或者
this.$refs.scroll.wrap.scrollTop = 0  //想滚到哪个高度，就写多少
注意     .warp必须要加，否则不生效。

例子：滚动到顶部（有动画效果）

<el-scrollbarl ref="scroll">
  // ...
</el-scrollbar>
<el-button @click="toTop">滚动到顶部</el-button>

<script>
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
  ? cubic(value * 2) / 2
  : 1 - cubic((1 - value) * 2) / 2;
//...
methods: {
  toTop() {
    // el-scrollbar 容器
    const el = this.$refs['scroll'].wrap;
    
    const beginTime = Date.now();
    const beginValue = el.scrollTop;
    const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
    const frameFunc = () => {
      const progress = (Date.now() - beginTime) / 500;
      if (progress < 1) {
        el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
        rAF(frameFunc);
      } else {
        el.scrollTop = 0;
      }
    };
    rAF(frameFunc);
  }
}
//...
</script>

常见包裹在界面布局layout的main最外层，如下

<section class="app-main">
    <el-scrollbar ref="scroll" wrap-class="scrollbar-wrapper" style="background: #f3f4f8">
      <keep-alive :include="cachedViews">
        <router-view :key="key" :class="{ 'self-router': !isMicroApp }" />
      </keep-alive>
      <div id="el-paas-portal-micro-app-container" />
    </el-scrollbar>
  </section>

el-table 滚动到指定行

滚动到指定行

scrollToRow(index) {
    this.$nextTick(() => {
        const tableBodyWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
        if (tableBodyWrapper) {
            const rows = tableBodyWrapper.querySelectorAll('.el-table__row');
            if (rows.length > 0) {
                const targetRow = rows[index];
                this.$refs.table.bodyWrapper.scrollTop = targetRow.offsetTop;
                /* or
                    const tableBody = tableBodyWrapper.querySelector('.el-table__body');
                    tableBody.scrollTop = targetRow.offsetTop;
                    targetRow.classList.add('current-row');
                */
            }
        }
    })
},

滚动到第一行

this.$refs.table.bodyWrapper.scrollTop = 0;  

滚动到最后一行

this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight;