Merge pull request #338 from ygowthamr/scrollBtnIssue

Enhanced ScrollTop Button Functionality
Harshdev098 · Oct 30, 2024 · 1da6fe3 · 1da6fe3
2 parents 11a377f + 9bd3249
commit 1da6fe3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 40 deletions.
diff --git a/public/script/main-page-script.js b/public/script/main-page-script.js
@@ -7,22 +7,20 @@ function hide() {
   document.getElementById("secondicon").style.display = "none";
 }
 
-let scrollToTopButton = document.getElementById("scrollToTop");
+const scrollTopBtn = document.getElementById("scrollToTop");
+scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
 
-// Show the button when the user scrolls down 100px from the top
-window.onscroll = function () {
-  if (
-    document.body.scrollTop > 100 ||
-    document.documentElement.scrollTop > 100
-  ) {
-    scrollToTopButton.style.display = "block";
-  } else {
-    scrollToTopButton.style.display = "none";
-  }
-};
+window.addEventListener('scroll', function() {
+
+    if (window.scrollY > 100) {
+        scrollTopBtn.style.setProperty('visibility', 'visible', 'important');
+    } else {
+        scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
+    }
+});
 
 // Scroll to the top when the button is clicked
-scrollToTopButton.addEventListener("click", function () {
+scrollTopBtn.addEventListener("click", function () {
   window.scrollTo({
     top: 0,
     behavior: "smooth",

diff --git a/public/script/script.js b/public/script/script.js
@@ -197,22 +197,20 @@ const last2 = document.querySelectorAll(".last_img_animation2");
 last2.forEach((el) => observer8.observe(el));
 
 // Get the button
-let scrollToTopButton = document.getElementById("scrollToTop");
-
-// Show the button when the user scrolls down 100px from the top
-window.onscroll = function () {
-  if (
-    document.body.scrollTop > 100 ||
-    document.documentElement.scrollTop > 100
-  ) {
-    scrollToTopButton.style.display = "block";
-  } else {
-    scrollToTopButton.style.display = "none";
-  }
-};
+const scrollTopBtn = document.getElementById("scrollToTop");
+scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
+
+window.addEventListener('scroll', function() {
+
+    if (window.scrollY > 100) {
+        scrollTopBtn.style.setProperty('visibility', 'visible', 'important');
+    } else {
+        scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
+    }
+});
 
 // Scroll to the top when the button is clicked
-scrollToTopButton.addEventListener("click", function () {
+scrollTopBtn.addEventListener("click", function () {
   window.scrollTo({
     top: 0,
     behavior: "smooth",

diff --git a/public/script/stk_mainpage.js b/public/script/stk_mainpage.js
@@ -150,22 +150,20 @@ const set = async () => {
   }
 };
 
-let scrollToTopButton = document.getElementById("scrollToTop");
+const scrollTopBtn = document.getElementById("scrollToTop");
+scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
 
-// Show the button when the user scrolls down 100px from the top
-window.onscroll = function () {
-  if (
-    document.body.scrollTop > 100 ||
-    document.documentElement.scrollTop > 100
-  ) {
-    scrollToTopButton.style.display = "block";
-  } else {
-    scrollToTopButton.style.display = "none";
-  }
-};
+window.addEventListener('scroll', function() {
+
+    if (window.scrollY > 100) {
+        scrollTopBtn.style.setProperty('visibility', 'visible', 'important');
+    } else {
+        scrollTopBtn.style.setProperty('visibility', 'hidden', 'important');
+    }
+});
 
 // Scroll to the top when the button is clicked
-scrollToTopButton.addEventListener("click", function () {
+scrollTopBtn.addEventListener("click", function () {
   window.scrollTo({
     top: 0,
     behavior: "smooth",