回到顶部功能,先是参考element 官网,复制代码
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
发现不起作用。网上有人说是必须在最外层标签,不太对。经研究发现是因为此组件必须在el-scrollbar组件内使用,target指向.el-scrollbar__wrap。
代码如下:
<template>
<div class="test-page">
<el-scrollbar style="height:100%;" wrap-style="overflow-x:hidden;">
滚动测试
<div class="mask" />
<el-backtop target=".el-scrollbar__wrap" :bottom="100" />
</el-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style scoped lang="scss">
.test-page {
height: 100%;
}
.mask {
height: 1500px;
}
</style>