From 351523040aa6672bee21194c0e370ff425fd8a5b Mon Sep 17 00:00:00 2001
From: DEV <121149738+Devmoni@users.noreply.github.com>
Date: Sun, 29 Dec 2024 21:59:22 +0530
Subject: [PATCH] Update the Back to Top button behavior. (#605)

The button now appears when the user has scrolled 30% down the page.
Previously, it was only visible in the footer.
---
 _includes/footer.html | 33 ++++++++++++++++++++++-----------
 css/custom.css        | 18 +++++++++++++++++-
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index fda5b4dc..5d0946b2 100755
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,12 @@
 <!-- Footer -->
 <footer  style="background-color:#282828;padding-top:5px;">
-    <h5 style="text-align:right;margin-right:20px;"><a href="#top" class="hrefCustomColor">Back to top&nbsp<i class="icon ion-arrow-up-c"></i></a></h5>
+    <h5 style="text-align:right;margin-right:20px;">
+        <a href="#top" class="hrefCustomColor" id="scrollToTopBtn" style="display:none;">
+            <svg width="24" height="15" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="icon">
+                <polygon points="16,14 6,24 7.4,25.4 16,16.8 24.6,25.4 26,24" class="arrow" fill="white" stroke="black" stroke-width="3"/>
+            </svg>                             
+        </a>
+    </h5>
     <div class="container">
         <div class="row">
             <div class="col-md-12" >
@@ -113,9 +119,9 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
 
 <!-- Inline Javascript scripts -->
 <script  type="text/javascript">
-	$(document).on('click', "a[href='#top']", function (e) {
-        $('html, body').animate({ scrollTop: 0 }, 'slow');
-        return false;
+    $(document).on('click', "a[href='#top'], #scrollToTopBtn", function (e) {
+    $('html, body').animate({ scrollTop: 0 }, 'slow');
+    return false;
     })
     $(document).ready(function () {
         $('#dismiss, .overlay').on('click', function () {
@@ -158,13 +164,18 @@ <h4 class="text-center"><a href="https://github.com/sugarlabs/www"><b><span clas
     return false;
     });
     $(document).on("scroll", function () {
-        if ($(document).scrollTop() > 10) {
-            $("header").removeClass("large").addClass("small");
-        }
-        else {
-            $("header").removeClass("small").addClass("large");
-        }
-    });
+    var scrollPosition = $(document).scrollTop();
+    var windowHeight = $(window).height();
+    var documentHeight = $(document).height();
+    var thirtyPercentOfPage = (documentHeight - windowHeight) * 0.3;
+
+    if (scrollPosition > thirtyPercentOfPage) {
+        $('#scrollToTopBtn').fadeIn();
+    } 
+    else {
+        $('#scrollToTopBtn').fadeOut();
+    }
+});
 </script>
 
 <!-- Google analytics code -->
diff --git a/css/custom.css b/css/custom.css
index 3e233b46..182e18d6 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -216,4 +216,20 @@
     padding: 10px 0; 
   }
   
-}
\ No newline at end of file
+}
+
+#scrollToTopBtn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: linear-gradient(45deg, #474354, white);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 2px solid black;
+  padding: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  display: none;
+}
+