Merge pull request #3 from rgoshen/fix-scroll-issue

fix scroll issue

index.html

@@ -143,13 +143,13 @@
                     <h1 class="mb-3">Rick Goshen</h1>
                     <p class="mb-3 mx-5 sub-heading">Software Engineer</p>
                     <a
-                            class="btn btn-outline-light btn-lg m-1"
+                            class="btn btn-outline-light btn-lg m-1 scroll-button"
                             href="#about"
                             role="button"
                     >My skills</a
                     >
                     <a
-                            class="btn btn-outline-light btn-lg m-1"
+                            class="btn btn-outline-light btn-lg m-1 scroll-button"
                             href="#projects"
                             role="button"
                     >My portfolio</a

scripts/script.js

@@ -3,3 +3,20 @@ const currentYear = document.getElementById('current-year');
 // update copyright date to current year
 const year = new Date().getFullYear();
 currentYear.innerHTML = year;
+
+// Select all buttons that should trigger the scroll behavior
+document.querySelectorAll('.scroll-button').forEach(button => {
+  button.addEventListener('click', function(e) {
+    console.log('clicked');
+    e.preventDefault(); // Prevent the default anchor behavior
+    const targetId = e.currentTarget.getAttribute("href");
+    const targetElement = document.querySelector(targetId);
+    const navbarHeight = document.querySelector('nav').offsetHeight; // Replace 'nav' with your navbar selector
+
+    // Smooth scroll to the section, adjusted for the navbar height
+    window.scrollTo({
+      top: targetElement.offsetTop - navbarHeight,
+      behavior: 'smooth'
+    });
+  });
+});