Add scroll behavior to chapter

client/src/components/Chapter.vue

@@ -3,6 +3,7 @@
     :data-scrollto="chapter.id"
     class="chapter"
     data-cy="chapter"
+    ref="wrapper"
   >
     <div
       :class="{ 'hideable-element--greyed-out': titleGreyedOut }"
@@ -66,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import ContentBlock from '@/components/ContentBlock.vue';
 import AddContentButton from '@/components/AddContentButton.vue';
 import BookmarkActions from '@/components/notes/BookmarkActions.vue';
@@ -81,6 +82,7 @@ import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChap
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
 import { getMe } from '@/mixins/me';
 import { useMutation } from '@vue/apollo-composable';
+import { useRoute } from 'vue-router';
 
 export interface Props {
   chapter: Chapter;
@@ -91,6 +93,20 @@ export interface Props {
 const { schoolClass } = getMe();
 
 const store = useStore();
+const route = useRoute();
+const wrapper = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  const element = wrapper.value;
+  if (element !== null) {
+    if (route.hash === `#${props.chapter.id}`) {
+      setTimeout(() => {
+        const rect = element.getBoundingClientRect();
+        window.scrollTo({ top: rect.y, behavior: 'smooth' });
+      }, 750);
+    }
+  }
+});
 
 const props = withDefaults(defineProps<Props>(), {
   index: 0,

client/src/components/ContentBlock.vue

@@ -209,8 +209,6 @@ const { mutate: doDeleteContentBlock } = useMutation(DELETE_CONTENT_BLOCK_MUTATI
   },
 }));
 
-const top = ref(0);
-
 onMounted(() => {
   const element = wrapper.value;
   if (element !== null) {
@@ -218,7 +216,6 @@ onMounted(() => {
       setTimeout(() => {
         const rect = element.getBoundingClientRect();
         window.scrollTo({ top: rect.y, behavior: 'smooth' });
-        top.value = rect.y;
       }, 750);
     }
   }