Fix scroll up button (#638)

* fix scroll-up button

* dist changes

* changes

* changes

dist/image-sequencer-ui.js

@@ -690,6 +690,25 @@ window.onload = function() {
   }
   refreshOptions();
 
+  $(window).on('scroll', scrollFunction);
+
+  function scrollFunction() {
+    var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
+
+    $('#move-up').css({
+       display: shouldDisplay ? 'block' : 'none'
+    });
+  }
+
+
+  function topFunction() {
+    $('body').animate({scrollTop: 0});
+    $(':root').animate({scrollTop: 0});
+  }
+
+  $('#move-up').on("click",topFunction);
+
+
   // UI for each step:
   sequencer.setUI(DefaultHtmlStepUi(sequencer));
 

examples/demo.css

@@ -153,25 +153,19 @@ h1 {
   height: auto;
 }
 
-.move-up {
+#move-up {
     position: fixed;
     bottom: 50px;
     right: 40px;
-    z-index: 3;
+    z-index: 550;
     display: none;
-    z-index:1000;
-}
-.move-up button {
     background:transparent;
     border:none;
 }
-.move-up button:active:hover {
+
-    padding-right:4px !important;
+#move-up i {
-    margin-right:2px;
-}
-.move-up i {
     font-size:60px;
-    opacity:0.5;
+    opacity:0.7;
     color:#BABABA;
 }
 

examples/demo.js

@@ -52,6 +52,25 @@ window.onload = function() {
   }
   refreshOptions();
 
+  $(window).on('scroll', scrollFunction);
+
+  function scrollFunction() {
+    var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;
+
+    $('#move-up').css({
+       display: shouldDisplay ? 'block' : 'none'
+    });
+  }
+
+
+  function topFunction() {
+    $('body').animate({scrollTop: 0});
+    $(':root').animate({scrollTop: 0});
+  }
+
+  $('#move-up').on("click",topFunction);
+
+
   // UI for each step:
   sequencer.setUI(DefaultHtmlStepUi(sequencer));
 

examples/index.html

@@ -182,9 +182,8 @@
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>
-  <form class="move-up" action="#up">
+
-    <button><i class="fa fa-arrow-circle-o-up"></i></button>
+  <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
-  </form>
 
   <script type="text/javascript">
     $(function() {