feat: use scrolltoHash function instead of router.scrollBehavior func…

…tion for jumplinks
data-preservation-programs · Jul 9, 2023 · c344c7b · c344c7b
1 parent c5cf902
commit c344c7b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 33 deletions.
diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -6,6 +6,31 @@
 
 <script>
 export default {
-  name: 'LayoutDefault'
+  name: 'LayoutDefault',
+
+  watch: {
+    '$route.hash' () {
+      this.scrollToHash()
+    }
+  },
+
+  mounted () {
+    // Scroll to hash
+    this.$nextTick(() => {
+      this.scrollToHash()
+    })
+  },
+
+  methods: {
+    scrollToHash () {
+      const hash = this.$route.hash.replace('#', '')
+      if (hash) {
+        const element = document.getElementById(hash) || document.querySelector(`[data-id='${hash}']`)
+        if (element) {
+          this.$scrollToElement(element, 200, -100)
+        }
+      }
+    }
+  }
 }
 </script>