diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index ec7a00507..95b824ad9 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -59,6 +59,10 @@ body {
   color: $colorText;
 }
 
+*[id] {
+  scroll-margin-top: 6rem;
+}
+
 button {
   font: inherit;
   cursor: pointer;
diff --git a/docs/src/main.js b/docs/src/main.js
index 99476dbe8..68c8b9681 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -5,9 +5,30 @@ import 'prismjs/components/prism-scss.js'
 import PortalVue from 'portal-vue'
 import App from '~/layouts/App'
 
-export default function (Vue) {
+export default function (Vue, { router }) {
   Vue.use(PortalVue)
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
   Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))
+
+  router.options.scrollBehavior = async (to, from, savedPosition) => {
+    if (to.hash) {
+      const elem = document.querySelector(to.hash)
+
+      if (elem) {
+        const offset = parseFloat(getComputedStyle(elem).scrollMarginTop)
+        return {
+          selector: to.hash,
+          offset: { y: offset },
+        }
+      }
+    }
+
+    if (savedPosition) {
+      return savedPosition
+    }
+
+    return { x: 0, y: 0 }
+  }
+
 }