VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • back-to-top
  • catalog
  • copy-code
  • copyright
  • icon
  • medium-zoom
  • notice
  • nprogress
  • photo-swipe
  • watermark

back-to-top

@vuepress/plugin-back-to-top

This plugin will add a back to top button to your site. The button will be displayed in the bottom right corner of the page when scrolling down. By clicking the button, the page will scroll to the top.

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

threshold

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

progress

  • Type: boolean
  • Default: true
  • Details: Whether display progress bar around icon

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;
}
Edit this page on GitHub
Last Updated:: 4/12/25, 7:03 PM
Contributors: Mister-Hope
Next
catalog