diff --git a/docs/gridsome.client.js b/docs/gridsome.client.js
index 6c5bcc172..f0a90ebb4 100644
--- a/docs/gridsome.client.js
+++ b/docs/gridsome.client.js
@@ -13,7 +13,10 @@ export default function (Vue, options, context) {
       setTimeout(() => {
         const element = document.getElementById(to.hash.substr(1))
         const top = element.offsetTop
-        const offset = parseFloat(getComputedStyle(element).scrollMarginTop)
+        const offset = parseFloat(
+          getComputedStyle(element).scrollMarginTop
+          || getComputedStyle(element).scrollSnapMarginTop,
+        )
 
         window.scrollTo(0, top - offset)
       }, 0)
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index 0f0542b7d..ccaf4fa71 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -61,6 +61,7 @@ body {
 
 *[id] {
   scroll-margin-top: 6rem;
+  scroll-snap-margin-top: 6rem;
 }
 
 button {