implement smooth scrolling

css/general.css

@@ -75,6 +75,9 @@ html {
   /* 10px/16px >> .625 >> 62.5% */
 
   overflow-x: hidden;
+
+  /* not working on safari */
+  /* scroll-behavior: smooth; */
 }
 
 /* --------------------- */

index.html

@@ -37,11 +37,13 @@
       </a>
       <nav class="main-nav">
         <ul class="main-nav-list">
-          <li><a class="main-nav-link" href="#">How it works</a></li>
-          <li><a class="main-nav-link" href="#">Meals</a></li>
-          <li><a class="main-nav-link" href="#">Testimonials</a></li>
-          <li><a class="main-nav-link" href="#">Pricing</a></li>
-          <li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
+          <li><a class="main-nav-link" href="#how">How it works</a></li>
+          <li><a class="main-nav-link" href="#meals">Meals</a></li>
+          <li>
+            <a class="main-nav-link" href="#testimonials">Testimonials</a>
+          </li>
+          <li><a class="main-nav-link" href="#pricing">Pricing</a></li>
+          <li><a class="main-nav-link nav-cta" href="#cta">Try for free</a></li>
         </ul>
       </nav>
       <button class="btn-mobile-nav">
@@ -61,10 +63,10 @@ <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" class="btn btn--outline">Learn more &darr;</a>
             <div class="delivered-meals">
               <div class="customers-imgs">
                 <img
@@ -125,7 +127,7 @@ <h2 class="heading-featured">as featured in</h2>
           </div>
         </div>
       </section>
-      <section class="section-how">
+      <section class="section-how" id="how">
         <div class="container">
           <span class="subheading">How it works</span>
           <h2 class="heading-secondary">
@@ -190,7 +192,7 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
           </div>
         </div>
       </section>
-      <section class="section-meals">
+      <section class="section-meals" id="meals">
         <div class="container center-text">
           <span class="subheading">Meals</span>
           <h2 class="heading-secondary">
@@ -306,7 +308,7 @@ <h3 class="heading-tertiary">works with any diet:</h3>
           <a href="#" class="link">see all recipes &rarr;</a>
         </div>
       </section>
-      <section class="section-testimonials">
+      <section class="section-testimonials" id="testimonials">
         <div class="testimonial-container">
           <span class="subheading">testimonials</span>
           <h2 class="heading-secondary">Once you try it, you can't leave it</h2>
@@ -437,7 +439,7 @@ <h2 class="heading-secondary">Once you try it, you can't leave it</h2>
           </figure>
         </div>
       </section>
-      <section class="section-pricing">
+      <section class="section-pricing" id="pricing">
         <div class="container">
           <span class="subheading">Pricing</span>
           <h2 class="heading-secondary">
@@ -543,7 +545,7 @@ <h2 class="heading-secondary">
           </div>
         </div>
       </section>
-      <section class="section-cta">
+      <section class="section-cta" id="cta">
         <div class="container">
           <div class="cta">
             <div class="cta-text-box">
@@ -670,5 +672,9 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
         </nav>
       </div>
     </footer>
+    <script
+      defer
+      src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"
+    ></script>
   </body>
 </html>

script.js

@@ -15,6 +15,36 @@ navBtn.addEventListener("click", function () {
   header.classList.toggle("nav-open");
 });
 
+//////////////////////////////////
+//smooth scrolling
+
+const allLinks = document.querySelectorAll("a");
+allLinks.forEach((link) => {
+  link.addEventListener("click", (e) => {
+    e.preventDefault();
+    const href = link.getAttribute("href");
+
+    // implement smooth scrolling
+    // scroll to top
+    if (href === "#") {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+
+    //scroll to other places
+    if (href !== "#" && href.startsWith("#")) {
+      const section = document.querySelector(href);
+      section.scrollIntoView({ behavior: "smooth" });
+    }
+
+    // close mobile navigation
+    if (link.classList.contains("main-nav-link"))
+      header.classList.toggle("nav-open");
+  });
+});
+
 ///////////////////////////////////////////////////////////
 // Fixing flexbox gap property missing in some Safari versions
 function checkFlexGap() {