vue 网页点击置顶图标缓慢置顶

最新推荐文章于 2025-07-21 09:29:07 发布

woderlili

最新推荐文章于 2025-07-21 09:29:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/sinat_41657240/article/details/124119984

本文介绍了如何在Vue项目中实现点击置顶功能。通过在子组件和父组件之间的交互，实现点击图标后元素缓缓置顶的效果。详细步骤包括子组件和父组件的设置以及引入相关代码。

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

利用js实现网页置顶缓动效果

- 子组件
- 父组件

子组件

<template>
  <div class="content_container_top" v-show="toTopShow">
    <div
      @mouseenter="ico = false"
      @mouseleave="ico = true"
      @click="scrollToTop"
      title="返回置顶"
    >
      <span class="iconfont gotTopicon"></span>
    </div>
  </div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      toTopShow: false,
      scrollTop: '',