Autoscroll to content when outside viewport

layouts/partials/articlePreview.html

@@ -2,9 +2,9 @@
   <h1>
     {{ partial "postIcon.html" . }}
     {{ if .Params.summarytitle }}
-    <a href="{{ .RelPermalink }}#content">{{ .Params.summarytitle }}</a>
+    <a href="{{ .RelPermalink }}">{{ .Params.summarytitle }}</a>
     {{ else }}
-    {{ if .Title }} <a href="{{ .RelPermalink }}#content">{{ .Title }}</a> {{ end }}
+    {{ if .Title }} <a href="{{ .RelPermalink }}">{{ .Title }}</a> {{ end }}
     {{ end }}
   </h1>
   <div class="content">
@@ -13,7 +13,7 @@
       {{ .Params.summary   |  safeHTML}}
       {{ else }}
       {{ .Summary |  safeHTML }} {{ if .Truncated }} …
-      <a class="more readMore" href="{{ .RelPermalink }}#content">Read
+      <a class="more readMore" href="{{ .RelPermalink }}">Read
         More... </a> {{ end }}
       {{ end }}
     </span>

layouts/partials/showcaseBanner.html

@@ -14,7 +14,7 @@
       <br />
       <br />
       <br />
-      <a href="/start/#content"><button  id="startbtn" class="highlightedCl"><i class="fas fa-rocket"></i> Get Started... </button></a>
+      <a href="/start/"><button  id="startbtn" class="highlightedCl"><i class="fas fa-rocket"></i> Get Started... </button></a>
         <br />
         <br />
     </div>

layouts/taxonomy/author.html

@@ -3,7 +3,7 @@
 {{ range first 1 (shuffle  (where  (where   .Site.Pages  "Params.authors"  "intersect" (slice .Data.Term)  )  "Params.tags"  "intersect" $filter ))}}
     {{ partial "showcaseBanner.html" . }}
 {{ end }}
-
+<a id="content"></a>
 <section class="list hlist responsiveWidth">
 
 <figure class="githubUser " github-user="{{ .Data.Term }}">

layouts/taxonomy/tag.html

@@ -3,6 +3,7 @@
     {{ range first 1 (shuffle  (where   .Site.Pages  "Params.tags"  "intersect" $filter    ) ) }}
     {{ partial "showcaseBanner.html" . }}
 {{ end }}
+<a id="content"></a>
 
 <h1><i class="fas fa-hashtag"></i>{{upper .Data.Term }}</h1>
 <section class="list responsiveWidth list vlist">

static/js/utils.js

@@ -40,8 +40,58 @@ window.shuffleArray = function (array) {
 
 
 
+function isInViewport (el) {
+
+    var rect = el.getBoundingClientRect();
+
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
+    );
+}
+
+function isVisible(el){
+    return !!el.offsetParent;
+}
+
+function lazyLoad(parent) {
+    parent.querySelectorAll('[lazy]').forEach(el => {
+        if (isVisible(el)) {
+            console.log("Lazy load", el,isVisible(el));
+
+            const attributeKeys = el.getAttributeNames();
+            attributeKeys.forEach(akey => {
+
+                if (akey.startsWith("lazy-")) {
+                    console.log("Load attribute " + akey);
+                    const realkey = akey.substring(5);
+                    const value = el.getAttribute(akey);
+                    el.setAttribute(realkey, value);
+                    console.log("Set", realkey, "=", value);
+
+                } else {
+                    console.log("Skip attribute", akey, "not lazy");
+                }
+            });
+        }
+    });
+}
+
+
 
 window.addEventListener("DOMContentLoaded", function () {
+    const contentAnchor=document.querySelector("#content");
+    if(contentAnchor&&!isInViewport(contentAnchor)){
+        contentAnchor.scrollIntoView({
+            behavior:"smooth",
+            block:"start",
+            inline:"nearest"
+        });
+        console.log("Scroll content into view");
+    }
+
     document.querySelectorAll("[toggle]").forEach(el => {
         const toggleId = el.getAttribute("toggle");
         if (!toggleId) return;
@@ -78,32 +128,4 @@ window.addEventListener("DOMContentLoaded", function () {
         });
     })
 
-});
-
-
-function isVisible(el){
-    return !!el.offsetParent;
-}
-
-function lazyLoad(parent) {
-    parent.querySelectorAll('[lazy]').forEach(el => {
-        if (isVisible(el)) {
-            console.log("Lazy load", el,isVisible(el));
-
-            const attributeKeys = el.getAttributeNames();
-            attributeKeys.forEach(akey => {
-
-                if (akey.startsWith("lazy-")) {
-                    console.log("Load attribute " + akey);
-                    const realkey = akey.substring(5);
-                    const value = el.getAttribute(akey);
-                    el.setAttribute(realkey, value);
-                    console.log("Set", realkey, "=", value);
-
-                } else {
-                    console.log("Skip attribute", akey, "not lazy");
-                }
-            });
-        }
-    });
-}
+});