Reimplement anchor navigation via Javascript

WebHostLib/static/assets/tutorial.js

@@ -0,0 +1,15 @@
+window.addEventListener('load', () => {
+    const headers = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+    const scrollTargetIndex = window.location.href.search(/#[A-z0-9-_]*$/);
+    for (let i=1; i < headers.length; i++){
+        const headerId = headers[i].innerText.replace(/[ ]/g,'-').toLowerCase()
+        headers[i].setAttribute('id', headerId);
+        headers[i].addEventListener('click', () =>
+            window.location.href = window.location.href.substring(0, scrollTargetIndex) + `#${headerId}`);
+    }
+
+    if (scrollTargetIndex > -1) {
+        const scrollTarget = window.location.href.substring(scrollTargetIndex + 1);
+        document.getElementById(scrollTarget).scrollIntoView({ behavior: "smooth" });
+    }
+});

WebHostLib/static/styles/tutorial.css

@@ -7,6 +7,7 @@
     font-size: 2.5rem;
     font-weight: normal;
     border-bottom: 1px solid #9f916a;
+    cursor: pointer;
     width: 100%;
 }
 
@@ -14,6 +15,7 @@
     font-size: 2rem;
     font-weight: normal;
     border-bottom: 1px solid #9f916a;
+    cursor: pointer;
     width: 100%;
 }
 
@@ -21,22 +23,26 @@
     font-size: 1.75rem;
     font-weight: normal;
     text-align: left;
+    cursor: pointer;
     width: 100%;
 }
 
 #tutorial-wrapper h4{
     font-size: 1.5rem;
     font-weight: normal;
+    cursor: pointer;
 }
 
 #tutorial-wrapper h5{
     font-size: 1.25rem;
     font-weight: normal;
+    cursor: pointer;
 }
 
 #tutorial-wrapper h6{
     font-size: 1.25rem;
     font-weight: normal;
+    cursor: pointer;
     color: #434343;
 }
 

WebHostLib/templates/tutorial.html

@@ -3,6 +3,7 @@
 {% block head %}
     <title>Setup Tutorial</title>
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tutorial.css") }}" />
+    <script type="application/ecmascript" src="{{ static_autoversion("assets/tutorial.js") }}"></script>
 {% endblock %}
 
 {% block body %}