Vue - 详细实现返回顶部组件，PC 端 / 移动端均适用（下滑页面到一定距离出现按钮，点击后返回顶部）

前言

当页面过长时，用户下滑一定距离后，显示返回顶部按钮，点击后可回到顶部。

在 vue / nuxt 项目中详细实现右下方悬浮返回顶部功能，当页面下滑一定距离后出现返回顶部按钮，点击直接返回（带过渡动画）。

本文将从 0-1 带您一路复制，实现 PC 端、移动端均适用的返回顶部组件，

开箱即用且无 BUG，您可以自定义返回顶部的所需时间、样式等。

---

为了方便您修改，只做了核心功能（没做过多的样式），如下图所示：

第一步

由于此需求可无限复用，故封装为组件，哪里用就哪里引入。

您随便找个位置，建立一个 backtop.vue 组件，一键复制以下代码。