vitepress-back-to-top-button

A lightweight Back-to-Top button Vue 3 component for VitePress. Features smooth scroll, progress ring indicating scroll percentage, dark/light theme support.

Live Demo and more information

✨ See it in action:
👉 https://davidingplus.github.io/vitepress-back-to-top-button/

📦 NPM Package:
👉 https://www.npmjs.com/package/@davidingplus/vitepress-back-to-top-button

Installation

npm i @davidingplus/vitepress-back-to-top-button

Usage

Configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import BackToTopButton from '@davidingplus/vitepress-back-to-top-button' //[!code ++]
import '@davidingplus/vitepress-back-to-top-button/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    BackToTopButton(ctx.app) //[!code ++]
  }
}

Advanced configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import BackToTopButton from '@davidingplus/vitepress-back-to-top-button' //[!code ++]
import '@davidingplus/vitepress-back-to-top-button/style.css' //[!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    BackToTopButton(ctx.app, { // [!code ++]
      progressColor: 'string', // default is #42b983 [!code ++]
      arrowSvg: `string` // only svg code [!code ++]
    })
  }
}

Preview

Preview - Desktop