updated: created dynamic scrolling for specified sections

Author: dot4msc

archive/archive.html

@@ -16,5 +16,26 @@
 
   </div>
   <script src="./js/archive.js"></script>
+  <script>
+    function scrollToHash() {
+      if (window.location.hash) {
+        const el = document.querySelector(window.location.hash);
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth" });
+          return true;
+        }
+      }
+      return false;
+    }
+    if (!scrollToHash()) {
+      const observer = new MutationObserver(() => {
+        if (scrollToHash()) {
+          observer.disconnect();
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+</script>
+
 </body>
 </html>

archive/js/archive.js

@@ -7,7 +7,6 @@ fetch('../blog-posts/posts.json').then(response => {
   return response.json();
 }).then(data => {
   let blogPosts = data.posts;
-  console.log(blogPosts);
   let followingPosts = blogPosts.slice(1);
 
   followingPosts.forEach(post => {
@@ -30,6 +29,7 @@ fetch('../blog-posts/posts.json').then(response => {
     blogTitle.innerText = post["title"];
     blogDate.innerText = post["date"];
     blogSong.innerHTML = post["song"];
+    blogContent.id = post["id"];
 
     blogContent.appendChild(blogTitle);
     blogContent.appendChild(blogDate);