feat: Implementing Smooth Scrolling

Author: zangeronimo

starter/07-Omnifood-Desktop/css/general.css

@@ -64,6 +64,8 @@ Medium 11px
 html {
   font-size: 62.5%;
   overflow-x: hidden;
+  /* Does NOT work on Safari */
+  /* scroll-behavior: smooth; */
 }
 
 body {

starter/07-Omnifood-Desktop/index.html

@@ -54,7 +54,7 @@
           <li>
             <a
               class="main-nav-link nav-cta"
-              href="#try-for-free"
+              href="#cta"
               alt="Main Nav Section Item"
               >Try for free</a
             >
@@ -80,10 +80,12 @@ <h1 class="heading-primary">
               eat healthy again. Tailored to your personal tastes and
               nutritional needs.
             </p>
-            <a href="#" class="btn btn--full margin-right-sm"
+            <a href="#cta" class="btn btn--full margin-right-sm"
               >Start eating well</a
             >
-            <a href="#" class="btn btn--outline">Learn more &darr;</a>
+            <a href="#how-it-works" class="btn btn--outline"
+              >Learn more &darr;</a
+            >
             <div class="delivered-meals">
               <div class="delivered-img">
                 <img src="img/customers/customer-1.jpg" alt="Customer photo" />
@@ -595,7 +597,7 @@ <h2 class="heading-secondary">
         </div>
       </section>
 
-      <section class="section-cta" id="try-for-free">
+      <section class="section-cta" id="cta">
         <div class="container">
           <div class="cta">
             <div class="cta-text-box">
@@ -733,6 +735,10 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
+    <script
+      defer
+      src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
+    ></script>
     <script defer src="js/script.js"></script>
   </body>
 </html>

starter/07-Omnifood-Desktop/js/script.js

@@ -30,6 +30,35 @@ btnMobileNavEl.addEventListener("click", function () {
   headerEl.classList.toggle("nav-open");
 });
 
+/////////////////////////////////////////////////////////////////////////////
+// Smooth scrolling animation
+const allLinks = document.querySelectorAll("a:link");
+allLinks.forEach((link) => {
+  link.addEventListener("click", (e) => {
+    e.preventDefault();
+    const href = link.getAttribute("href");
+
+    // Scroll back to top
+    if (href === "#") {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+
+    // Scroll to other links
+    if (href !== "#" && href.startsWith("#")) {
+      const section = document.querySelector(href);
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+
+    // Close mobile navigation
+    if (link.classList.contains("main-nav-link")) {
+      headerEl.classList.toggle("nav-open");
+    }
+  });
+});
+
 // https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js
 
 /*