back-to-top

该插件会给你的站点添加一个 返回顶部 按钮。当页面向下滚动时，该按钮会显示在页面的右下角，点击它就会滚动到页面顶部。

该插件已经集成到默认主题中。

使用方法

npm i -D @vuepress/plugin-back-to-top@next

import { backToTopPlugin } from '@vuepress/plugin-back-to-top'

export default {
  plugins: [backToTopPlugin()],
}

选项

threshold

• 类型：数字
• 默认值：100
• 详情：显示返回顶部按钮的滚动阈值距离（以像素为单位）

progress

• 类型：布尔值
• 默认值：true
• 详情：是否在图标周围显示进度条

样式

你可以通过 CSS 变量来自定义 返回顶部 按钮的样式：

:root {
  --back-to-top-z-index: 5;
  --back-to-top-icon: url("back-to-top.svg");
  --back-to-top-bg-color: #fff;
  --back-to-top-color: #3eaf7c;
  --back-to-top-color-hover: #71cda3;
  --back-to-top-shadow: rgb(0 0 0 / 20%);
}