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

# el-scrollbar 滚动到指定的位置

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

<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;