Why element's el-backtop won't work, come here!

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

Point the target to the component where you want to generate the "back to top" button,
This component must be the component that produces the scroll bar!
This component must be the component that produces the scroll bar!
This component must be the component that produces the scroll bar!

Give a chestnut, the chestnut in 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>

This will not generate buttons, because the wrapper-content component will not generate scroll bars, and there will be no scroll events. Change target to target=".wrapper", Because it is the wrapper that actually generates the scroll event.

Pay attention to this sentence style:

 <div id="app" class="wrapper" style="height:520px;overflow: auto;">

Give the parent component overflow: auto, and height, otherwise the parent component will be automatically stretched and no scroll event will be generated (if there is a scroll bar, it is also the upper level, if the upper level has not set the height, it is the window); set 520px to 100% is also useless, you can use document.body.offsetHeightthis method to set the height that fits the screen; if you don’t want to set a specific height, add the following style, 100% of the upper level is also useful

html,body,#app {
    
    height: 100%;}

Attach the official website introduction
Insert picture description here

The target is best to use id, because it is unique
template is essential
When using attributes other than target, you must use a colon (v-bind), because it receives a number, and you can only pass a string without a colon, such as

<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>

Why element's el-backtop won't work, come here!

Guess you like