fix(vue-app): respect scroll-margin-top when navigating with hash (#…

…9187)
nuxt · May 15, 2021 · 00aeff6 · 00aeff6
1 parent 877ebcd
commit 00aeff6
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/vue-app/template/router.scrollBehavior.js b/packages/vue-app/template/router.scrollBehavior.js
@@ -66,9 +66,15 @@ export default function (to, from, savedPosition) {
           hash = '#' + window.CSS.escape(hash.substr(1))
         }
         try {
-          if (document.querySelector(hash)) {
+          const el = document.querySelector(hash)
+          if (el) {
             // scroll to anchor by returning the selector
             position = { selector: hash }
+            // Respect any scroll-margin-top set in CSS when scrolling to anchor
+            const y = Number(getComputedStyle(el)['scroll-margin-top']?.replace('px', ''))
+            if (y) {
+              position.offset = { y }
+            }
           }
         } catch (e) {
           <%= isTest ? '// eslint-disable-next-line no-console' : '' %>