Include a back-to-top Button on scrolling down (#446)

* Update index.html * Create scrollToTop.js * Update demo.css * Update index.html
publiclab · Oct 27, 2018 · f937680 · f937680
1 parent 85c9262
commit f937680
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -137,3 +137,24 @@ h1 {
   height: auto;
 }
 
+.move-up {
+    position: fixed;
+    bottom: 50px;
+    right: 40px;
+    z-index: 3;
+    display: none;
+    z-index:1000;
+}
+.move-up button {
+    background:transparent;
+    border:none;
+}
+.move-up button:active:hover {
+    padding-right:4px !important;
+    margin-right:2px;
+}
+.move-up i {
+    font-size:60px;
+    opacity:0.5;
+    color:#BABABA;
+}
diff --git a/examples/index.html b/examples/index.html
@@ -26,6 +26,9 @@
 
   <!-- Download.js for large files -->
   <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
+
+  <script src="lib/scrollToTop.js"></script>
+
 </head>
 
 
@@ -123,6 +126,9 @@ <h4 class="modal-title">Your gif is ready</h4>
   </div>
     <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
 </div>
+<form class="move-up" action="#up">
+    <button><i class="fa fa-arrow-circle-o-up"></i></button>
+</form>
   <script type="text/javascript">
     $(function() {
       var sequencer;

diff --git a/examples/lib/scrollToTop.js b/examples/lib/scrollToTop.js
@@ -0,0 +1,17 @@
+$(document).ready(function($){
+	$(function(){
+		$(window).scroll(function(){
+			if ($(this).scrollTop() > 100){
+				$('.move-up').fadeIn();
+			} else {
+				$('.move-up').fadeOut();
+			}
+		});
+		$('.move-up button').click(function(){
+			$('body,html').animate({
+				scrollTop: 0
+			}, 800);
+			return false;
+		});
+	});
+});