Merge pull request #4776 from souvikpramanikgit/add-scrollbtn

I added a scroll to top button in about page
anuragverma108 · Nov 9, 2024 · 4bc5aa7 · 4bc5aa7
2 parents 32cae55 + 02e38ce
commit 4bc5aa7
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 3 deletions.
diff --git a/assets/html/about.html b/assets/html/about.html
@@ -1868,9 +1868,21 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem; font-size: 28px; font-weigh
       }
     </style>
 </footer>
+<div>
+  <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+    <button class="Btn">
+      <svg height="1.2em" class="arrow" viewBox="0 0 512 512">
+        <path
+          d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z">
+        </path>
+      </svg>
+      <p class="text">Back to Top</p>
+    </button>
+  </div>
   <div>
     <button id="translateButton">Translate</button>
   </div>
+</div>
   <style>
     /* Fixed translate button */
 #translateButton {
@@ -1988,6 +2000,31 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem; font-size: 28px; font-weigh
     display: none !important;
 }
   </style>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+const backToTopButton = document.getElementById('back-to-top-container');
+
+    function checkButtonVisibility() {
+if (window.innerWidth > 100 && window.scrollY > 100) {
+      backToTopButton.style.display = 'block';
+} else {
+      backToTopButton.style.display = 'none';
+}
+}
+
+    window.addEventListener('scroll', checkButtonVisibility);
+    window.addEventListener('resize', checkButtonVisibility);
+
+    backToTopButton.addEventListener('click', function () {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+});
+
+    checkButtonVisibility();
+});
+</script>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
     // Get the popup

diff --git a/assets/html/event.html b/assets/html/event.html
@@ -1163,8 +1163,45 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem; font-size: 28px; font-weigh
     </footer>
 
     <div>
-      <button id="translateButton">Translate</button>
+      <div id="back-to-top-container" onclick="lenis.scrollTo('#home')" class="right">
+        <button class="Btn">
+          <svg height="1.2em" class="arrow" viewBox="0 0 512 512">
+            <path
+              d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z">
+            </path>
+          </svg>
+          <p class="text">Back to Top</p>
+        </button>
+      </div>
+      <div>
+        <button id="translateButton">Translate</button>
+      </div>
     </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+  const backToTopButton = document.getElementById('back-to-top-container');
+
+      function checkButtonVisibility() {
+  if (window.innerWidth > 100 && window.scrollY > 100) {
+        backToTopButton.style.display = 'block';
+  } else {
+        backToTopButton.style.display = 'none';
+  }
+  }
+
+      window.addEventListener('scroll', checkButtonVisibility);
+      window.addEventListener('resize', checkButtonVisibility);
+
+      backToTopButton.addEventListener('click', function () {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+  });
+
+      checkButtonVisibility();
+  });
+  </script>
     <style>
       /* Fixed translate button */
   #translateButton {
@@ -1285,6 +1322,31 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem; font-size: 28px; font-weigh
       display: none !important;
   }
     </style>
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+  const backToTopButton = document.getElementById('back-to-top-container');
+
+      function checkButtonVisibility() {
+  if (window.innerWidth > 100 && window.scrollY > 100) {
+        backToTopButton.style.display = 'block';
+  } else {
+        backToTopButton.style.display = 'none';
+  }
+  }
+
+      window.addEventListener('scroll', checkButtonVisibility);
+      window.addEventListener('resize', checkButtonVisibility);
+
+      backToTopButton.addEventListener('click', function () {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+  });
+
+      checkButtonVisibility();
+  });
+  </script>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
       // Get the popup
@@ -1328,8 +1390,6 @@ <h2 style="margin-bottom: 2.4rem; margin-top:0.5rem; font-size: 28px; font-weigh
   <!-- Your custom JavaScript -->
   <script src="script.js"></script>
 
-
-
     <script>
         document.addEventListener("DOMContentLoaded", function() {
             const buttons = document.querySelectorAll(".author button");

diff --git a/scrollToTop.js b/scrollToTop.js