diff --git a/assets/navigation-scroll-fix.js b/assets/navigation-scroll-fix.js
new file mode 100644
index 00000000..e2eedc92
--- /dev/null
+++ b/assets/navigation-scroll-fix.js
@@ -0,0 +1,17 @@
+window.addEventListener("load", function() {
+    for (let link of document.querySelectorAll("nav a")) {
+        link.addEventListener("click", function() {
+            let fragmentIndex = link.href.indexOf("#");
+            let anchor = null;
+            if (fragmentIndex >= 0) {
+                let fragment = link.href.substring(fragmentIndex + 1, link.href.length);
+                anchor = document.getElementById(fragment);
+            }
+            if (anchor) {
+                document.documentElement.scrollTop += anchor.getBoundingClientRect().y;
+            } else {
+                document.documentElement.scrollTop = 0;
+            }
+        });
+    }
+});
diff --git a/assets/navigation.js b/assets/navigation.js
index 7469e67e..9069538b 100644
--- a/assets/navigation.js
+++ b/assets/navigation.js
@@ -15,7 +15,7 @@ window.addEventListener("load", function() {
     for (let section of document.querySelectorAll("section")) {
         let id = section.getAttribute("id");
         let link = nav.querySelector("a[href=\\#" + id.replace(/\//g, "\\/") + "]");
-        if (link !== null) {
+        if (link) {
             link = link.parentElement;
             link.classList.remove("active");
             sections.push([section, link]);
@@ -43,13 +43,12 @@ window.addEventListener("load", function() {
             }
             link = link.parentElement;
         }
-        if (link === null) {
-            nav.scrollTop = 0;
-        } else {
+        if (link) {
             let topLink = link.getBoundingClientRect().y;
             let topNav = nav.getBoundingClientRect().y;
-            let y = nav.scrollTop + topLink - topNav - 10;
-            nav.scrollTo(0, y);
+            nav.scrollTop += topLink - topNav - 10;
+        } else {
+            nav.scrollTop = 0;
         }
     }
     function resizeNav() {
diff --git a/assets/screen-narrow.css b/assets/screen-narrow.css
index 461ffcf3..ad2473bf 100644
--- a/assets/screen-narrow.css
+++ b/assets/screen-narrow.css
@@ -19,15 +19,16 @@ header .logoContainer, header ul, main {
 
 nav {
     position: fixed;
-    width: 0;
+    width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
     background-color: #E4E9F6;
     z-index: 1;
-    transition: width ease .2s;
     max-height: initial !important;
     margin: 0;
+    transform: translate(-100vw);
+    transition: transform ease .2s;
 }
 
 html.nav-opened {
@@ -35,7 +36,7 @@ html.nav-opened {
 }
 
 .nav-opened nav {
-    width: 100vw;
+    transform: translate(0);
 }
 
 main, .navContainer {
diff --git a/documentation-generator/template.html b/documentation-generator/template.html
index eac23fe1..7ffe5531 100644
--- a/documentation-generator/template.html
+++ b/documentation-generator/template.html
@@ -20,6 +20,7 @@ $endif$
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
 <script src="assets/narrow-menu.js"></script>
+<script src="assets/navigation-scroll-fix.js"></script>
 <script>
     const documentBranch = "$branch$";
     const documentBranches = ["$for(branches)$$branches$$sep$", "$endfor$"];