From 73d1528b4992445713644c41a146815ebf3ca257 Mon Sep 17 00:00:00 2001
From: Harshith pabbati <pabbatiharshith@gmail.com>
Date: Sat, 16 Feb 2019 01:24:18 +0530
Subject: [PATCH] #80 created the scroll to top button (#140)

---
 examples/demo.css | 26 +++++++++++++++++++++++++-
 index.html        | 20 +++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index 66075665..1d0de419 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -43,4 +43,28 @@ h1, h2, .section h3 {
 .header {
   text-align: center;
 }
-
+#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: 50px;
+    right: 0;
+    background-color: #DDD;
+    color: #555;
+    text-align: center;
+    font-size: 30px;
+    text-decoration: none;
+}
+#back2Top:hover {
+    background-color: #DDF;
+    color: #000;
+}
diff --git a/index.html b/index.html
index 022f44e4..d468aa3a 100644
--- a/index.html
+++ b/index.html
@@ -180,6 +180,24 @@ <h2 class="contributors-head">Contributors</h2>
     </footer>
 
     <script type="text/javascript">
+      /*Scroll to top when arrow up clicked BEGIN*/
+$(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;
+    });
+
+});
+ /*Scroll to top when arrow up clicked END*/
 
       var toolbox;
 
@@ -256,7 +274,7 @@ <h2 class="contributors-head">Contributors</h2>
 
 
     </script>
-
+    <a id="back2Top" title="Back to top" href="#">&#10148;</a>
   </body>
 
 </html>