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-c-bg: var(--vp-c-bg);
--back-to-top-c-accent: var(--vp-c-accent);
--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;
}