关于elementui中的Backtop 回到顶部的使用方法

elementui中的Backtop 回到顶部的使用方法
首先,将elementui中的代码粘到body中,将代码中的target换成整个大div的类名

<div class="wraper">
  <template>
    Scroll down to see the bottom-right button.
    <el-backtop target=".wraper">
      <div class="back-ball">
        回到顶部
      </div>
    </el-backtop>
  </template>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
  <h1>滚动内容部分</h1>
</div>

需要注意的是这里的类whole的css代码,需要这样写

.whole{
    height:90vh ;/*height可以根据你要创建的页面进行修改*/
    width: 100vw;
    overflow-x: hidden;
    overflow-y: scroll;
  }

就可以实现回到顶部这一动作了。

你可能感兴趣的:(关于elementui中的Backtop 回到顶部的使用方法)