Optimized javascript and anchor links.

public/assets/css/styles.css

@@ -39,4 +39,19 @@ section.hero video {
   height: 100%;
   object-fit: cover;
   z-index: -1;
+}
+
+.anchor-link {
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+h1:hover .anchor-link,
+h2:hover .anchor-link,
+h3:hover .anchor-link,
+h4:hover .anchor-link,
+h5:hover .anchor-link,
+h6:hover .anchor-link {
+  opacity: 1;
 }

public/assets/js/header.js

@@ -1,34 +0,0 @@
-window.addEventListener('scroll', () =>
-{
-  // Add class to body when scrolled.
-  document.body.classList.toggle('is-scrolled', window.scrollY > 0);
-
-  // Parallax effect.
-  /**
-   * @type {HTMLVideoElement}
-   */
-  const heroVid = document.querySelector('.hero video');
-  heroVid.style.top = `${window.scrollY / 3}px`;
-
-  // Highlight menu item when scrolled to section.
-  let current = '';
-  document.querySelectorAll('.section').forEach(section =>
-  {
-    const sectionTop = section.offsetTop;
-
-    if (window.scrollY >= sectionTop - 70)
-    {
-      current = section.getAttribute('id');
-    }
-  });
-
-  document.querySelectorAll('.nav-link').forEach(link =>
-  {
-    link.classList.remove('active');
-
-    if (link.getAttribute('href') === `#${current}`)
-    {
-      link.classList.add('active');
-    }
-  });
-});

public/assets/js/navigation.js

@@ -0,0 +1,58 @@
+/**
+ * @type {HTMLVideoElement}
+ */
+const heroVid = document.querySelector('.hero video');
+
+/**
+ * @type {NodeListOf<HTMLAnchorElement>}
+ */
+const navlinks = document.querySelectorAll('a.nav-link');
+
+/**
+ * @type {NodeListOf<HTMLElement>}
+ */
+const sections = document.querySelectorAll('.section');
+
+// Handle scroll events.
+window.addEventListener('scroll', () =>
+{
+  // Add class to body when scrolled.
+  document.body.classList.toggle('is-scrolled', window.scrollY > 0);
+
+  // Parallax effect.
+  heroVid.style.top = `${window.scrollY / 3}px`;
+
+  // Highlight menu item when scrolled to section.
+  let current = '';
+  sections.forEach(section =>
+  {
+    const sectionTop = section.offsetTop;
+
+    if (window.scrollY >= sectionTop - 70)
+    {
+      current = section.getAttribute('id');
+    }
+  });
+
+  navlinks.forEach(link =>
+  {
+    link.classList.remove('active');
+
+    if (link.getAttribute('href') === `#${current}`)
+    {
+      link.classList.add('active');
+    }
+  });
+});
+
+document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(header =>
+{
+  if (header.id)
+  {
+    const anchor = document.createElement('a');
+    anchor.className = 'anchor-link';
+    anchor.href = `#${header.id}`;
+    anchor.innerHTML = ' #&nbsp;';
+    header.appendChild(anchor);
+  }
+});

public/includes/head.html

@@ -9,5 +9,5 @@
 
   <script src="https://kit.fontawesome.com/7e7cf109ad.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
-  <script src="assets/js/header.js" defer></script>
+  <script src="assets/js/navigation.js" defer></script>
 </head>