elementui回到顶部Backtop

最新推荐文章于 2024-07-17 08:37:25 发布

码林鼠

最新推荐文章于 2024-07-17 08:37:25 发布

阅读量948

点赞数

CC 4.0 BY-SA版权

分类专栏： elementui 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_41254345/article/details/103716813

elementui 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了一种在网页中实现滚动返回顶部功能的方法，通过使用Element UI的el-backtop组件，结合特定的CSS样式和高度设置，可以有效地增强用户体验。文章通过具体代码示例，展示了如何将该组件应用到具有滚动条的页面区域，确保即使在长页面滚动后也能快速回到页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="home">
    滑动滚轮然后给我滚回来
    <el-backtop target=".home">
      <div class="back">
        滚到顶部
      </div>
    </el-backtop>
    <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>
</template>
<script>
  export default {
    name: 'home',
  }
</script>
<style>
  .home {
    border: 1px solid red;
    height: 500px;//注意，给个高度才有效果
    overflow-y: scroll;
  }

  .back {
    background-color: red;
    color: #fff;
    border-radius: 20px;
  }
</style>