Smooth scroll: added to docs (#1402)

* Scrollspy: added smooth scroll * Added actual smooth scroll * Scrollspy: fixed naming after CR * Getting started scrollspy: fixed typo * Smooth scrollspy: fixed offset
mdbootstrap · Mar 9, 2023 · 384c891 · 384c891
1 parent b0c8efe
commit 384c891
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/demo/sites/navigation/scrollspy.html b/demo/sites/navigation/scrollspy.html
@@ -135,39 +135,39 @@ <h3 class="pt-5 pb-3 text-xl font-semibold">Section 4</h3>
               <a
                 data-te-nav-link-ref
                 data-te-nav-link-active
-                class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                 href="#example-1"
                 >Section 1</a
               >
             </li>
             <li class="py-1">
               <a
                 data-te-nav-link-ref
-                class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                 href="#example-2"
                 >Section 2</a
               >
             </li>
             <li class="py-1">
               <a
                 data-te-nav-link-ref
-                class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                 href="#example-3"
                 >Section 3</a
               >
               <ul data-te-nav-list-ref class="pl-3">
                 <li class="py-1">
                   <a
                     data-te-nav-link-ref
-                    class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                    class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                     href="#example-sub-A"
                     >Subsection A</a
                   >
                 </li>
                 <li>
                   <a
                     data-te-nav-link-ref
-                    class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                    class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                     href="#example-sub-B"
                     >Subsection B</a
                   >
@@ -177,7 +177,7 @@ <h3 class="pt-5 pb-3 text-xl font-semibold">Section 4</h3>
             <li class="py-1">
               <a
                 data-te-nav-link-ref
-                class="bg-transparent px-[5px] text-[#4b5563] shadow-none dark:text-neutral-200"
+                class="bg-transparent px-[5px] text-[#4b5563] shadow-none transition-all dark:text-neutral-200"
                 href="#example-4"
                 >Section 4</a
               >

diff --git a/site/content/docs/standard/getting-started/quick-start/index.html b/site/content/docs/standard/getting-started/quick-start/index.html
@@ -41,7 +41,7 @@
     <h2
       class="mt-0 mb-5 text-3xl font-semibold leading-normal"
       id="npm"
-      data-te-scrollspy-item>
+      data-te-spy-item>
       NPM
     </h2>
     <p class="my-3">

diff --git a/site/layouts/partials/footer/footer-scripts.html b/site/layouts/partials/footer/footer-scripts.html
@@ -317,34 +317,54 @@
       section.classList.add(...scrollspyClasses)
     );
 
+    // SmoothScroll
+    function teScrollSpyTo(event) {
+      event.preventDefault();
+      const hash = event.target.getAttribute("href");
+      const target = document.getElementById(hash.substring(1));
+      // console.log(target);
+      window.scroll({
+        top: target.offsetTop,
+        behavior: "smooth",
+      });
+
+      if (history.pushState) {
+        history.pushState(null, null, hash);
+      } else {
+        location.hash = hash;
+      }
+    }
+
     // for clickable event
-    menuSection.forEach((v) => {
-      v.onclick = () => {
+    menuSection.forEach((menuElement) => {
+      menuElement.addEventListener("click", teScrollSpyTo, false);
+      menuElement.addEventListener("click", () => {
         setTimeout(() => {
           menuSection.forEach((j) => j.removeAttribute("data-te-spy-active"));
-          v.setAttribute("data-te-spy-active", "");
+          menuElement.setAttribute("data-te-spy-active", "");
         }, 300);
-      };
+      });
     });
 
     // for window scrolldown event
-
-    window.onscroll = () => {
+    window.addEventListener("scroll", () => {
       const SELECTOR_SCROLLSPY_ITEM = "[data-te-spy-item]";
       let mainSection = document.querySelectorAll(SELECTOR_SCROLLSPY_ITEM);
 
-      mainSection.forEach((v, i) => {
-        let rect = v.getBoundingClientRect().y;
+      mainSection.forEach((header, i) => {
+        let rect = header.getBoundingClientRect().bottom;
 
-        if (rect < window.innerHeight + -940) {
-          menuSection.forEach((v) => v.removeAttribute("data-te-spy-active"));
+        if (rect < 100) {
+          menuSection.forEach((menuElement) =>
+            menuElement.removeAttribute("data-te-spy-active")
+          );
           if (!menuSection[i]) {
             return;
           }
           menuSection[i].setAttribute("data-te-spy-active", "");
         }
       });
-    };
+    });
   })();
 
   const clip = document.querySelectorAll(".clip");