scroll to selection in get started

Author: riccardobl

content/start.md

@@ -11,13 +11,23 @@ function showSubPage(id){
     const subpages=document.querySelectorAll(".qspage");
     subpages.forEach(sp=>sp.hidden=true);
     const selectedSubPage=document.querySelector(".qspage#"+id);
+    if (!selectedSubPage) {
+        return;
+    }
     selectedSubPage.hidden=false;
 
     const buttons=document.querySelectorAll("button.qsbtn");
     buttons.forEach(el=>el.classList.remove("highlightedCl"));
 
     const selectedBtn=document.querySelector("button#"+id+"Btn");
-    selectedBtn.classList.add("highlightedCl");
+    if (selectedBtn) {
+        selectedBtn.classList.add("highlightedCl");
+    }
+
+    selectedSubPage.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+    });
 }
 </script>
 <div id="qsbuttons">

static/css/pages/_start.less

@@ -55,6 +55,7 @@
     box-shadow: none;
 }
 .qspage {
+    scroll-margin-top: 6rem;
     background: rgba(23,23,27,0.58);
     border: 1px solid rgba(255,255,255,0.07);
     border-radius: 18px;

static/css/style.css

@@ -1079,6 +1079,7 @@ nav li a.active {
   box-shadow: none;
 }
 .qspage {
+  scroll-margin-top: 6rem;
   background: rgba(23, 23, 27, 0.58);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 18px;