vuepress-plugin-smooth-scroll

Introduction

A simple plugin to make Vuepress scroll smoothly.

It simply does two things:

Use window.scrollTo({ behavior: 'smooth' }) for scrollBehavior
Add scroll-behavior: smooth; to the <html> element
- Reference
- Browser compatibility

TIP

The first one only works with <RouterLink to="#anchor">
The second one works with both <RouterLink to="#anchor"> and <a href="#anchor">

You may notice that the browser compatibility of this two features are quite different, so we currently use both of them.

For better browser compatibility, we suggest to use <RouterLink to="#anchor"> if possible.

WARNING

This plugin may not work well with @vuepress/plugin-active-header-links, which is used in the default theme of Vuepress.

The problem is that, @vuepress/plugin-active-header-links watches the scroll event to set the active sidebar link, and vuepress-plugin-smooth-scroll will trigger the scroll event for sure.

Click the sidebar of this page and you will see what the problem is.

If you are using your own theme without @vuepress/plugin-active-header-links, you can have a try on this plugin.

Usage

Installation

Install vuepress-plugin-smooth-scroll via NPM:

npm install vuepress-plugin-smooth-scroll

Use the plugin

See Vuepress Offical Docs for how to use a plugin in detail

// .vuepress/config.js

module.exports = {
  plugins: {
    'vuepress-plugin-smooth-scroll': true,
  },
}

Demo

Click the links in the sidebar
Click the header anchors



This



is



used



to



make



the



page



longer

# vuepress-plugin-smooth-scroll

# Introduction

# Usage

# Installation

# Use the plugin

# Demo