#2821 reworked anchors on glossary page to scroll appropriately

Author: jdaigneau5

src/components/SearchTable.vue

@@ -1,82 +1,82 @@
 <template>
   <div ref="tableRef" class="table-container">
-    <table aria-live="polite" class="table cve-border-dark-blue is-striped is-hoverable" >
+    <table aria-live="polite" class="table cve-border-dark-blue is-striped is-hoverable">
       <thead>
         <tr>
-          <th v-for="(header, index) in tableHeaders" :key="index">{{header}}</th>
+          <th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(entry, index) in tableData" :key="index"
+        <tr
+          v-for="(entry, index) in tableData"
+          :key="index"
           :id="entry.id"
           :ref="entry.id"
           v-on:click="selectRow(entry.id)"
-          
-          v-bind:class="{'cve-term-active': selectedRow === entry.id}">
+          v-bind:class="{ 'cve-term-active': selectedRow === entry.id }"
+        >
           <td class="table-column-width">
-              <a :href="entry.termLink" v-bind:class="{'selectTermLink': selectedRow === entry.id}" class="has-text-weight-bold termLink"> {{ entry.term }} </a>
+            <router-link
+              :to="'#' + entry.id"
+              v-bind:class="{ selectTermLink: selectedRow === entry.id }"
+              class="has-text-weight-bold termLink"
+            >
+              {{ entry.term }}
+            </router-link>
           </td>
-          <td v-if="renderAsHTML" class="cve-term-definition" v-html="entry.definition"> </td>
-          <td v-else class="cve-term-definition">{{ entry.definition }} </td>
+          <td
+            v-if="renderAsHTML"
+            class="cve-term-definition"
+            v-html="entry.definition"
+          ></td>
+          <td v-else class="cve-term-definition">{{ entry.definition }}</td>
         </tr>
       </tbody>
     </table>
   </div>
-  </template>
-  
-  <script>
+</template>
 
-  export default {
-    name: "SearchTable",
-    props: {
-      tableData: {
-        type: Array,
-        required: true,
-      },
-      tableHeaders: {
-        type: Array,
-        required: true,
-      },
-      renderAsHTML: {
-        type: Boolean,
-        default: false,
-        required: false,
-      }
+<script>
+export default {
+  name: "SearchTable",
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
     },
-    data() {
-      return {
-       selectedRow: null 
-      };
+    tableHeaders: {
+      type: Array,
+      required: true,
     },
-    mounted() {
-      let term = null;
-
-        // Add active term as a hash to scroll to it then select it
-      if (this.$route.query.activeTerm) {
-            term = this.$route.query.activeTerm;
-            this.$router.push({hash: "#" + term })
-            this.selectRow(term)
-      }
-      // If route already has a hash, just select the term
-      else if (this.$route.hash) {
-            term = this.$route.hash.slice(1);
-            this.selectRow(term)
-      }
+    renderAsHTML: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    methods: {
-      selectRow(rowId) {
-        
-          this.selectedRow = (rowId === this.selectedRow ? null : rowId)
-      }
+  },
+  data() {
+    return {
+      selectedRow: null,
+    };
+  },
+  mounted() {
+    let term = null;
+
+    if (this.$route.hash) {
+      term = this.$route.hash.slice(1);
+      this.selectRow(term);
+    }
+  },
+  methods: {
+    selectRow(rowId) {
+      this.selectedRow = rowId;
     },
-  };
-  </script>
-  
-  <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-  
-@import '@/assets/style/routerLink.scss';
+  },
+};
+</script>
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
 @media only screen and (min-width: $desktop) {
   .table-column-width {
     width: 30% !important;
@@ -85,18 +85,19 @@
 
 .cve-term-active {
   background-color: $theme-color-accent-cool-light !important;
-  color: black ;
-  padding-left: 8px; 
+  color: black;
+  padding-left: 8px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
-  
+
 .termLink {
   color: $theme-color-primary;
+  background: unset;
+  // scroll-margin: 50px;
 }
 
 .selectTermLink {
   color: black;
 }
 </style>
-   

src/router/index.js

@@ -45,16 +45,24 @@ import NotFound from '@/views/NotFound.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  scrollBehavior(to) {
-    if (to.hash) {
-      return {
-        el: to.hash,
-        top: 55
-      };
-    }
-    return {
-      top: 0
-    };
+  scrollBehavior(to) {  
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (to.hash) {
+          resolve({
+            el: to.hash,
+            top: 55,
+            behavior: "instant"
+          });
+        }
+        resolve({
+          top: 0
+        });
+      }, 0)
+    
+    })
+
+   
   },
   routes: [
     {
@@ -213,6 +221,12 @@ const router = createRouter({
       meta: {
         title: 'Glossary | CVE',
       },
+      beforeEnter: (to) => {
+        if (!to.hash) {
+          const term = to.query.activeTerm;
+          to.hash = '#' + term
+        }
+      },
     },
     {
       path: '/ResourcesSupport/FAQs',