Added anchors for category items

front/client/components/CategoryItemToolbar.vue

@@ -13,13 +13,19 @@
         @click.stop=""
       >
         <v-toolbar-title class="headline">
+          <!-- TODO change markup formatting after resolving issue with extra spaces
+           (if closing tag on another line vue-template-compiler adds extra space) -->
+          <router-link
+            :to="{path: $route.path, hash:`item-${itemUid}`}"
+            :id="`item-${itemUid}`"
+            class="category-item-anchor"
+          >#</router-link>
           <a-link
             v-if="itemLink"
             :url="itemLink"
             openInNewTab
           >
-            {{ itemName }}
-          </a-link>
+            {{ itemName }}</a-link>
           <span v-else> {{ itemName }} </span>
         </v-toolbar-title>
         <v-spacer></v-spacer>
@@ -162,6 +168,9 @@ export default class CategoryItemToolbar extends Vue {
 </script>
 
 <style scoped>
+.category-item-anchor {
+  color: rgb(151, 151, 151);
+}
 .edit-item-info-changed-icon {
   position: absolute;
   bottom: 0;

front/client/entry.client.ts

@@ -20,6 +20,12 @@ router.onReady(() => {
 
 function registerBeforeResolve () {
   router.beforeEach(async (to, from, next) => {
+    // This case handles navigation to anchors on same page
+    if (to.path === from.path) {
+      next()
+      return
+    }
+
     store.commit('tooglePageLoading')
     if (!to.matched.length) {
       store.commit('tooglePageLoading')

front/client/router/index.ts

@@ -6,11 +6,12 @@ function createRouter () {
     fallback: false,
     // TODO update vue-router when scroll issue will be fixed
     // https://github.com/vuejs/vue-router/issues/2095
-    scrollBehavior: (to, from, savedPosition) => {
+    // https://github.com/vuejs/vue-router/issues/1668
+    scrollBehavior (to, from, savedPosition) {
       if (savedPosition) {
         return savedPosition
       } else if (to.hash) {
-        return { selector: to.hash }
+        return { selector: to.hash, offset: { y: 96, x: 0 } }
       } else {
         return { x: 0, y: 0 }
       }