back-to-top

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

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

使用方法

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

.vuepress/config.ts
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-c-bg: var(--vp-c-bg);
  --back-to-top-c-accent-bg: var(--vp-c-accent-bg);
  --back-to-top-c-accent-hover: var(--vp-c-accent-hover);
  --back-to-top-c-shadow: var(--vp-c-shadow);
  --back-to-top-c-icon: currentcolor;
}