<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
把target指向你要产生“回到顶部”按钮的组件,
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!
举个栗子,App.vue中的栗子
<template>
<div id="app" class="wrapper" style="height:520px;overflow: auto;">
<div class="wrapper-content" style="height:2020px;background-color:aliceblue;text-align:center;position:relative;">
<!-- 回到顶部 -->
<template>
<el-backtop target=".wrapper-content"></el-backtop>
</template>
<div>顶部</div>
<div style="position:absolute;bottom:0;left:49%;">底部</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
html,body,#app {
height: 100%;
}
</style>
这样是不会产生按钮的,因为wrapper-content组件不会产生滚动条,更不会有滚动事件,要把target改成 target=“.wrapper”,因为真正产生滚动事件的是wrapper。
注意这句样式:
<div id="app" class="wrapper" style="height:520px;overflow: auto;">
要给父组件overflow: auto,和高度,否则父组件会被自动撑开,不产生滚动事件(如果有滚动条那也是上级的,如果上级一直没有设置height那就是window的);把520px设置为100%也是没有用的,可以用document.body.offsetHeight
这个方法设置适合屏幕的高度;若不想设置具体高度则加上下面这句样式,把上级高度全部100%也是管用的
html,body,#app {height: 100%;}
附上官网介绍
- target最好用id,因为唯一
- template必不可少
- 使用target以外的属性时一定要用冒号(v-bind),因为它接收的是数字,不用冒号只能传字符串,如
<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>