Vue 回到顶部按钮完整代码在最后

最新推荐文章于 2024-07-11 17:32:07 发布

置顶

D_evin_

最新推荐文章于 2024-07-11 17:32:07 发布

阅读量871

点赞数 2

文章标签： vue.js javascript webview vue 大前端

本文链接：https://blog.csdn.net/D_evin_/article/details/121698100

版权

本文介绍了如何在Vue项目中实现返回顶部的功能。通过在mounted钩子中添加滚动监听事件，结合自定义方法scrollToTop，当页面滚动距离大于浏览器高度时显示返回顶部按钮。在离开页面时移除监听事件以避免错误。提供了完整的HTML和Vue代码示例。

摘要由CSDN通过智能技术生成

HTML代码

<template>
  <div>
    <a href="#top" target="_self" id="top-btn">
      <img src="/images/返回顶部.png" alt />
    </a>
  </div>
</template>

图标在阿里巴巴矢量图标库：iconfont-阿里巴巴矢量图标库输入"返回顶部"搜索

在 mounted 钩子中给window添加一个滚动滚动监听事件

mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },

然后在方法中，添加这个 scrollToTop 方法

scrollToTop() { 
　　var scrollTop = window.pageYOffset || docum

关注