Bugfix/auto scroll to chapter

src/components/books/book-chapters-list.vue

@@ -1,7 +1,7 @@
 <template>
     <section class="list">
         <ol class="chapters">
-            <li v-for="(chapter, index) in chapters" :key="index">
+            <li v-for="(chapter, index) in chapters" :key="index" :chapter="chapter.id">
                 <router-link 
                 :to="`${chapter.id}`"
                 append

src/components/layout/app-sidebar.vue

@@ -10,6 +10,7 @@
                 <ol class="chapters">
                     <li v-for="chapter in chapters.sort((a, b) => parseInt(a.id) - parseInt(b.id))" 
                         :key="chapter.id"
+                        :chapter="chapter.id"
                         :class="['chapter', { 'current-chapter': chapter.id == selectedChapter }]" 
                         @click="$emit('chapterChanged', chapter.id)">
                         <a v-bind:alt="chapter.title"><h5>{{chapter.title}}</h5></a>

src/components/not-found.vue

@@ -9,7 +9,7 @@
                 <section class="list">
                     <h4>{{$t('not-found.suggestions')}}</h4>
                     <ol class="chapters">
-                        <li v-for="(translation, index) in translations" :key="index">
+                        <li v-for="(translation, index) in translations" :key="index" :chapter="index+1">
                             <a @click="changeBookLanguage(translation.language)">
                                 <h5>
                                     <img class="flag" width="16" height="16" 

src/components/reader/article-scroller.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import LoadingSpinner from 'components/loading-spinner';
 
 export default {
@@ -39,7 +38,7 @@ export default {
     },
     methods: {
         addScrollHandler() {
-            Vue.nextTick(() => {
+            this.$nextTick(() => {
                 window.addEventListener('scroll', this.scrollHandler);
             });
         },

src/mixins/reader.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 export default {
     methods: {
         async loadTop() {
@@ -50,18 +49,33 @@ export default {
             if(!article) return null;
             return `chapter-element-${article.chapterId}`;
         },
-        scrollToChapter(chapterId, offset = -100) {
+        scrollToChapter(chapterId, offset = -105) {
             let article = this.articles.find((a) => a.chapterId === chapterId);
             if (!article) return false;
             var self = this;
-            window.scrollTo(0,0);
-            if (chapterId >= 2) {
-                Vue.nextTick()
-                    .then(() => {
-                        let chapterElementRect = document.querySelector('#'+self.getElementName(article)).getBoundingClientRect();
-                        window.scrollTo(0, chapterElementRect.top + offset);
-                    });
+            var targetY = null;
+            const fireCallbackOnTargetHit = function(event) {
+                // When we reach the top of the document, we can scroll to the chapter
+                if (window.scrollY == 0)  {
+                    if (chapterId >= 2) {
+                        self.$nextTick()
+                            .then(() => {
+                                let chapterElementRect = document.querySelector('#'+self.getElementName(article)).getBoundingClientRect();
+                                targetY = Math.round(chapterElementRect.top)
+                                window.scrollTo(0, targetY);
+                            });
+                    }
+                }
+                // When we have reached the target chapter, we can remove the callback and scroll by an offset to account for the header
+                else if (window.scrollY == targetY) {
+                    window.removeEventListener('scroll', fireCallbackOnTargetHit)
+                    window.scrollBy(0, offset)
+                }
             }
+            window.addEventListener('scroll', fireCallbackOnTargetHit)
+            window.scrollTo(0,0);
+            // We fire the callback manually to ensure we catch it even if the user is already at the top of the page
+            fireCallbackOnTargetHit()
         },
         setCurrentChapter(chapterId) {
             if (this.isPublication)

src/styles/style.scss

@@ -550,7 +550,7 @@ ol.chapters{
 		}
 
 		&:before{
-			content: counter(li);
+			content: attr(chapter);
 			display: inline-block;
 			position: absolute;