back-to-top

This plugin adds a back to top button to your site. The button appears in the bottom right corner when scrolling down and scrolls the page to the top when clicked.

This plugin has been integrated into the default theme.

Usage

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

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

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

Options

threshold

• Type: number
• Default: 100
• Details: Scroll threshold distance to display the back to top button (in pixels)

progress

• Type: boolean
• Default: true
• Details: Whether to display scroll progress

Styles

You can customize the style of the back to top button via CSS variables:

: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;
}