From 0a621cf31c0cbde9ca643b54625d33f504ede5ab Mon Sep 17 00:00:00 2001
From: manavb2214 <131509907+manavb2214@users.noreply.github.com>
Date: Sat, 14 Oct 2023 16:07:18 +0530
Subject: [PATCH] Create Back-Top Button using HTML & CSS

Fixes #6633

Here have I have added Back-to-Top button using HTML, CSS, JS.

I have not added any text but you can add your own text.

You can use this as per your reference.

Hope this solves the issue.

As its my first PR request looking forward for merging this PR request.
---
 Back-Top Button using HTML & CSS | 113 +++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 Back-Top Button using HTML & CSS
diff --git a/Back-Top Button using HTML & CSS b/Back-Top Button using HTML & CSS
new file mode 100644
index 00000000000..e37410c1215
--- /dev/null
+++ b/Back-Top Button using HTML & CSS	
@@ -0,0 +1,113 @@
+<!-- Fixes #6633 -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_parent" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Free_6.4.2/css/mdb.min.css"
+    />
+    <style>
+      #btn-back-to-top {
+        position: fixed;
+        bottom: 30px;
+        right: 20px;
+        display: none;
+      }
+      p {
+        font-family: "Nunito", sans-serif;
+      }
+      .foot {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 30px;
+      }
+    </style>
+    <style>
+      INPUT:-webkit-autofill,
+      SELECT:-webkit-autofill,
+      TEXTAREA:-webkit-autofill {
+        animation-name: onautofillstart;
+      }
+      INPUT:not(:-webkit-autofill),
+      SELECT:not(:-webkit-autofill),
+      TEXTAREA:not(:-webkit-autofill) {
+        animation-name: onautofillcancel;
+      }
+      @keyframes onautofillstart {
+      }
+      @keyframes onautofillcancel {
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Back to top button -->
+    <button
+      type="button"
+      class="btn btn-danger btn-floating btn-lg"
+      id="btn-back-to-top"
+      style="display: none"
+    >
+      <i class="fas fa-arrow-up"></i>
+    </button>
+
+    <!-- Explanation -->
+    <div class="container mt-4 text-center" style="height: 2000px">
+      <p>
+        <strong>"ADD YOUR TEXT HERE"</strong>
+      </p>
+
+      <p>Scroll Down</p>
+    </div>
+    <footer class="foot">
+      <p>
+        Click the button <strong>beside</strong> to go to the top of the page.
+      </p>
+    </footer>
+    <script
+      type="text/javascript"
+      src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Free_6.4.2/js/mdb.min.js"
+    ></script>
+    <script type="text/javascript">
+      {
+        //Get the button
+        let mybutton = document.getElementById("btn-back-to-top");
+
+        // When the user scrolls down 20px from the top of the document, show the button
+        window.onscroll = function () {
+          scrollFunction();
+        };
+
+        function scrollFunction() {
+          if (
+            document.body.scrollTop > 20 ||
+            document.documentElement.scrollTop > 20
+          ) {
+            mybutton.style.display = "block";
+          } else {
+            mybutton.style.display = "none";
+          }
+        }
+        // When the user clicks on the button, scroll to the top of the document
+        mybutton.addEventListener("click", backToTop);
+
+        function backToTop() {
+          document.body.scrollTop = 0;
+          document.documentElement.scrollTop = 0;
+        }
+      }
+    </script>
+  </body>
+</html>
