#80 created the scroll to top button (#140)

publiclab · Feb 15, 2019 · 73d1528 · 73d1528
1 parent a05c597
commit 73d1528
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git 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
@@ -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>