Back to top button added

css/style.css

@@ -11834,4 +11834,34 @@ background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
     margin-top: -100% !important;
     margin-bottom: -20%;
   }
+}
+
+/*Styling for back to top button*/
+
+#back2top {
+  width: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  z-index: 999;
+  display: none;
+  cursor: pointer;
+  -moz-transform: rotate(270deg);
+  -webkit-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+  position: fixed;
+  bottom: 55px;
+  right: 0;
+  background-color: #4d647b;
+  color: #FFF;
+  text-align: center;
+  font-size: 30px;
+  text-decoration: none;
+  border-radius: 8px 8px 0px 0px;
+}
+
+#back2top:hover {
+  background-color: #DDF;
+  color: #000;
 }

index.html

@@ -557,6 +557,12 @@ <h3 class="heading"><a href="#">Even the all-powerful Pointing has no control ab
       </div>
     </section> -->
 
+    <!--Adddition of dynamic back to top button-->
+
+    <a id="back2top" title="Back To Top" href="#">&#10148;</a>
+
+
+
     <footer class="ftco-footer ftco-bg-dark ftco-section">
       <div class="container">
         <!-- <div class="row mb-5">

js/main.js

@@ -295,3 +295,21 @@
 
 })(jQuery);
 
+//Working of back to top button
+
+$(window).scroll(function() {
+    var height = $(window).scrollTop();
+    if (height > 100) {
+        $('#back2top').fadeIn();
+    } else {
+        $('#back2top').fadeOut();
+    }
+});
+$(document).ready(function() {
+    $("#back2top").click(function(event) {
+        event.preventDefault();
+        $("html, body").animate({ scrollTop: 0 }, "slow");
+        return false;
+    });
+
+});