fix: locomotive issue

abhishektyagi2912 · Jan 5, 2024 · 0d1dee1 · 0d1dee1
1 parent bf704df
commit 0d1dee1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -46,6 +46,7 @@ <h3>I'm a dedicated computer science student at SRM University, deeply passionat
                         Full Stack Development, with a particular focus on RESTful APIs. My academic journey has
                         equipped me with a strong foundation in these areas, and I'm continually driven by a thirst for
                         knowledge and a commitment to innovation.</h3>
+
                     <img class="right" src="./assests/img/arrow.png" alt="">
                     <div class="magnet projectbtn">
                         <a href="" class="btn">Start Projects </a>

diff --git a/javascript/index.js b/javascript/index.js
@@ -36,60 +36,81 @@ const scroll = new LocomotiveScroll({
     },
 });
 
+// window.addEventListener('pageshow', function (event) {
+//     if (event.persisted) {
+//         // Page is loaded from back/forward cache
+//         scroll.update();
+//     } else {
+//         // Page is fully reloaded
+//         location.reload();
+//     }
+// });
+
 // Attach smooth scroll to navigation links with data-scroll-to attribute
 document.addEventListener('DOMContentLoaded', function () {
-    document.querySelectorAll('[data-scroll-to]').forEach(function (link) {
-        link.addEventListener('click', function (e) {
-            var targetId = this.getAttribute('href');
+    setupSmoothScroll();
 
-            if (targetId.charAt(0) === '#') {
-                e.preventDefault();
-                smoothScroll(targetId);
-            }
-        });
+    window.addEventListener('pageshow', function (event) {
+        if (!event.persisted) {
+            setupSmoothScroll();
+        }
     });
 
-    function smoothScroll(targetId) {
-        const targetElement = document.querySelector(targetId);
-
-        if (targetElement) {
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: targetElement,
-                    offsetY: 50, // Adjust this offset based on layout
-                },
-                onComplete: () => {
-                    scroll.update(); 
-                },
+    function setupSmoothScroll() {
+        document.querySelectorAll('[data-scroll-to]').forEach(function (link) {
+            link.addEventListener('click', function (e) {
+                var targetId = this.getAttribute('href');
+
+                if (targetId.charAt(0) === '#') {
+                    e.preventDefault();
+                    smoothScroll(targetId);
+                }
             });
+        });
+
+        function smoothScroll(targetId) {
+            const targetElement = document.querySelector(targetId);
+
+            if (targetElement) {
+                gsap.to(window, {
+                    duration: 1,
+                    scrollTo: {
+                        y: targetElement,
+                        offsetY: 50, // Adjust this offset based on layout
+                    },
+                    onComplete: () => {
+                        scroll.update();
+                    },
+                });
+            }
         }
     }
 });
 
-document.addEventListener('DOMContentLoaded', function () {
-    const scrollToTopButton = document.getElementById('scroll-to-top');
-
-    window.addEventListener('scroll', function () {
-        if (window.scrollY > 100) {
-            scrollToTopButton.style.opacity = '1';
-            scrollToTopButton.style.pointerEvents = 'auto';
-        } else {
-            scrollToTopButton.style.opacity = '0';
-            scrollToTopButton.style.pointerEvents = 'none';
-        }
-    });
 
-    scrollToTopButton.addEventListener('click', function () {
-        gsap.to(window, {
-            duration: 1,
-            scrollTo: {
-                y: '#home',
-                offsetY: 0,
-            },
-        });
-    });
-});
+// document.addEventListener('DOMContentLoaded', function () {
+//     const scrollToTopButton = document.getElementById('scroll-to-top');
+
+//     window.addEventListener('scroll', function () {
+//         if (window.scrollY > 100) {
+//             scrollToTopButton.style.opacity = '1';
+//             scrollToTopButton.style.pointerEvents = 'auto';
+//         } else {
+//             scrollToTopButton.style.opacity = '0';
+//             scrollToTopButton.style.pointerEvents = 'none';
+//         }
+//     });
+
+//     scrollToTopButton.addEventListener('click', function () {
+//         gsap.to(window, {
+//             duration: 1,
+//             scrollTo: {
+//                 y: '#home',
+//                 offsetY: 0,
+//             },
+//         });
+//     });
+// });
 
 // image animation