Added floating button to the top

The-Shivam-garg · Feb 14, 2022 · 6e6941a · 6e6941a
1 parent 89fc23a
commit 6e6941a
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 6 deletions.
diff --git a/Blog/blog.html b/Blog/blog.html
@@ -22,6 +22,10 @@
   </head>
 
   <body>
+
+    <!-- floating button to the top -->
+    <a href="#" id="scroll"><span></span></a>
+
     <!--   Navigation  -->
 
     <header>
@@ -678,5 +682,23 @@ <h4 class="text-gray">
         big_wrapper.classList.toggle("active");
       });
     </script>
+
+<script>
+  // floating button to the top 
+  $(document).ready(function() {
+      $(document).scroll(function(){
+          if($(this).scrollTop() > 100){
+              $("#scroll").fadeIn();
+          } else{
+              $("#scroll").fadeOut();
+          }
+      });
+      $("#scroll").click(function () {
+          $("html,body").animate({scrollTop:0},600);
+          return false;
+      });
+  });
+
+</script>
   </body>
 </html>
diff --git a/Blog/css/Style.css b/Blog/css/Style.css
@@ -7,6 +7,41 @@ body {
   overflow-x: hidden;
 }
 
+#scroll{
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  background-color: #49c9f8;
+  text-indent: -9999px;
+  display: none;
+  border-radius: 60px;
+  z-index: 20;
+  box-shadow: 0px 0px 13px rgba(0,0,0,0.1);
+}
+
+#scroll span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: -12px;
+  height: 0;
+  width: 0;
+  border: 8px solid transparent;
+  border-bottom-color: #000000;
+}
+
+#scroll:hover{
+  background-color: #038cbe;
+  opacity: 1;
+  filter: "alpha(opacity=100)";
+  -ms-filter: "alpha(opacity=100)";
+}
+
+
 :root {
   /*      Theme colors        */
   --text-gray: #3f4954;

diff --git a/Course/Courses.html b/Course/Courses.html
@@ -46,6 +46,10 @@
 </head>
 
 <body>
+
+    <!-- floating button to the top -->
+    <a href="#" id="scroll"><span></span></a>
+
 
     <div class="sidebar">
         <div class="logo-details">
@@ -279,6 +283,25 @@ <h3>follow us</h3>
             }
         }
     </script>
+
+<script>
+    // floating button to the top 
+    $(document).ready(function() {
+        $(document).scroll(function(){
+            if($(this).scrollTop() > 100){
+                $("#scroll").fadeIn();
+            } else{
+                $("#scroll").fadeOut();
+            }
+        });
+        $("#scroll").click(function () {
+            $("html,body").animate({scrollTop:0},600);
+            return false;
+        });
+    });
+
+</script>
+
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
     <!-- custom js file link  -->
     <script src="js/script.js"></script>

diff --git a/Course/css/style.css b/Course/css/style.css
diff --git a/Course/js/script.js b/Course/js/script.js
@@ -22,4 +22,21 @@ document.querySelectorAll('.course-3 .box .video video').forEach(vid =>{
 
 document.querySelector('#close-vid').onclick = () =>{
     mainVid.classList.remove('active');
-}
+}
+
+
+        // floating button to the top 
+        $(document).ready(function() {
+            $(document).scroll(function(){
+                if($(this).scrollTop() > 100){
+                    $("#scroll").fadeIn();
+                } else{
+                    $("#scroll").fadeOut();
+                }
+            });
+            $("#scroll").click(function () {
+                $("html,body").animate({scrollTop:0},600);
+                return false;
+            });
+        });
+
diff --git a/css/main.css b/css/main.css
@@ -24,6 +24,40 @@ html{
     color: var(--black);
 }
 
+#scroll{
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+    cursor: pointer;
+    width: 50px;
+    height: 50px;
+    background-color: #49c9f8;
+    text-indent: -9999px;
+    display: none;
+    border-radius: 60px;
+    z-index: 20;
+    box-shadow: 0px 0px 13px rgba(0,0,0,0.1);
+}
+
+#scroll span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -8px;
+    margin-top: -12px;
+    height: 0;
+    width: 0;
+    border: 8px solid transparent;
+    border-bottom-color: #000000;
+}
+
+#scroll:hover{
+    background-color: #038cbe;
+    opacity: 1;
+    filter: "alpha(opacity=100)";
+    -ms-filter: "alpha(opacity=100)";
+}
+
 
 /* welcome */
 .welcome{

diff --git a/feature-pg/features.css b/feature-pg/features.css
@@ -7,6 +7,41 @@ body {
   overflow-x: hidden;
 }
 
+#scroll{
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  background-color: #49c9f8;
+  text-indent: -9999px;
+  display: none;
+  border-radius: 60px;
+  z-index: 20;
+  box-shadow: 0px 0px 13px rgba(0,0,0,0.1);
+}
+
+#scroll span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: -12px;
+  height: 0;
+  width: 0;
+  border: 8px solid transparent;
+  border-bottom-color: #000000;
+}
+
+#scroll:hover{
+  background-color: #038cbe;
+  opacity: 1;
+  filter: "alpha(opacity=100)";
+  -ms-filter: "alpha(opacity=100)";
+}
+
+
 :root {
   /*      Theme colors        */
   --text-gray: #3f4954;

diff --git a/feature-pg/features.html b/feature-pg/features.html
@@ -25,6 +25,10 @@
 
 <body>
 
+    <!-- floating button to the top -->
+    <a href="#" id="scroll"><span></span></a>
+
+
     <!--   Navigation  -->
 
     <header>
@@ -396,6 +400,7 @@ <h4 class="text-gray">
         </div>
     </footer>
 
+
     <!-- -------------x------------- Footer --------------------x------------------- -->
 
     <!-- Jquery Library file -->

diff --git a/feature-pg/js/main.js b/feature-pg/js/main.js
@@ -36,11 +36,30 @@ $(document).ready(function () {
 
 
     // click to scroll top
-    $('.move-up span').click(function () {
-        $('html, body').animate({
-            scrollTop: 0
-        }, 1000);
-    })
+    // $('.move-up span').click(function () {
+    //     $('html, body').animate({
+    //         scrollTop: 0
+    //     }, 1000);
+    // })
+
+
+        // floating button to the top 
+
+            $(document).scroll(function(){
+                if($(this).scrollTop() > 100){
+                    $("#scroll").fadeIn();
+                } else{
+                    $("#scroll").fadeOut();
+                }
+            });
+            $("#scroll").click(function () {
+                $("html,body").animate({scrollTop:0},600);
+                return false;
+            });
+
+
+
+
 
     // AOS Instance
     AOS.init();

diff --git a/index.html b/index.html
@@ -30,6 +30,10 @@
 
 <body>
     <div id="preloader"></div>
+
+    <!-- floating button to the top -->
+    <a href="#" id="scroll"><span></span></a>
+
     <main>
         <div class="big-wrapper light">
             <img src="img/shape.png" alt="" class="shape" />
@@ -660,5 +664,23 @@ <h3 class="lg-text">Have a Question?</h3>
                 preloader.style.display = "none";
             })
         </script>
+
+        <script>
+            // floating button to the top 
+            $(document).ready(function() {
+                $(document).scroll(function(){
+                    if($(this).scrollTop() > 100){
+                        $("#scroll").fadeIn();
+                    } else{
+                        $("#scroll").fadeOut();
+                    }
+                });
+                $("#scroll").click(function () {
+                    $("html,body").animate({scrollTop:0},600);
+                    return false;
+                });
+            });
+
+        </script>
         </body>
         </html>