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

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

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

Options

thresholdnumber

Default100

Scroll threshold distance to display the back to top button (in pixels).

progressboolean

Defaulttrue

Whether to display scroll progress.

localesLocaleConfig<BackToTopPluginLocaleData>

Locale config of the plugin.

Styles

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

@use 'pkg:@vuepress/helper';

$back-to-top-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24.008 14.1V42M12 26l12-12 12 12M12 6h24"/></svg>';

:root {
  --back-to-top-z-index: 5;
  --back-to-top-icon: #{helper.encode-svg($back-to-top-icon)};
  --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;
}