From 4869b06e8a56a18e5e77aa2c487d6000d01c1492 Mon Sep 17 00:00:00 2001
From: 992manav <dmanavpianist@gmail.com>
Date: Tue, 3 Sep 2024 13:20:06 +0530
Subject: [PATCH] Add smooth scrolling effect to navigation links

---
 index.html | 17 +++++++++++------
 script.js  | 51 ++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 1dd67d6a..61ba5c78 100644
--- a/index.html
+++ b/index.html
@@ -172,15 +172,20 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
             <div>
               <ul class="hidden md:flex items-center gap-10 uppercase text-xs font-semibold tracking-wider ">
-                <li>
-                  <a href="./index.html"
-                     class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Home</a>
+               <li>
+                  <a  href="./index.html"
+                    class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300">
+                    Home
+                  </a>
                 </li>
+
                 <li>
-                  <a href="#mentalHealthComponent"
-                     class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">
-                    Mental Health Problems </a>
+                  <a id="scrollToMentalHealth" href="#mentalHealthComponent"
+                    class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300">
+                    Mental Health Problems
+                  </a>
                 </li>
+
                 <li>
                   <a href="./Blogs/Blog.html"
                      class="pb-3 hover:text-black relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-black hover:after:w-full after:ease-in-out after:duration-300 ">Power
diff --git a/script.js b/script.js
index 40ad9afe..7a5e68d2 100644
--- a/script.js
+++ b/script.js
@@ -1,31 +1,30 @@
-let dropMenuLinks = document.querySelector('.dropMenuLinks');
-let indexOpenDropDown = document.querySelector('.indexOpenDropDown');
-let closeDropDown = document.querySelector('.closeDropDown');
-let heroSection = document.querySelector('.heroSection');
+let dropMenuLinks = document.querySelector(".dropMenuLinks");
+let indexOpenDropDown = document.querySelector(".indexOpenDropDown");
+let closeDropDown = document.querySelector(".closeDropDown");
+let heroSection = document.querySelector(".heroSection");
 
 indexOpenDropDown.onclick = () => {
   dropMenuLinks.style.right = 0;
   heroSection.style.zIndex = `1`;
-}
+};
 
 closeDropDown.onclick = () => {
   dropMenuLinks.style.right = `-2000px`;
   heroSection.style.zIndex = `50`;
-
-}
+};
 
 function subscribe() {
-  var email = document.getElementById('email').value;
-  
+  var email = document.getElementById("email").value;
+
   // Validate email address
   if (!validateEmail(email)) {
-    showPopup('Please enter a valid email address.');
+    showPopup("Please enter a valid email address.");
     return;
   }
-  
+
   // send the email address to the admin
   // For demonstration, let's just show a confirmation message
-  showPopup('You have successfully subscribed with email: ' + email);
+  showPopup("You have successfully subscribed with email: " + email);
 }
 
 function validateEmail(email) {
@@ -35,11 +34,29 @@ function validateEmail(email) {
 }
 
 function showPopup(message) {
-  var popup = document.getElementById('popup');
-  var popuptext = document.getElementById('popuptext');
+  var popup = document.getElementById("popup");
+  var popuptext = document.getElementById("popuptext");
   popuptext.textContent = message;
-  popup.classList.add('show');
-  setTimeout(function() {
-    popup.classList.remove('show');
+  popup.classList.add("show");
+  setTimeout(function () {
+    popup.classList.remove("show");
   }, 3000); // Hide popup after 3 seconds
 }
+
+const anchor = document.getElementById("scrollToMentalHealth");
+
+if (anchor) {
+  anchor.addEventListener("click", function (event) {
+    event.preventDefault();
+
+    const targetId = this.getAttribute("href").substring(1);
+    const targetElement = document.getElementById(targetId);
+
+    if (targetElement) {
+      targetElement.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  });
+}