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

* Update index.html

* Create scrollToTop.js

* Update demo.css

* Update index.html
This commit is contained in:
Sparks
2018-10-28 05:34:21 +07:00
committed by Jeffrey Warren
parent 85c92626e4
commit f9376808fd
3 changed files with 44 additions and 0 deletions

View File

@@ -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;
}

View File

@@ -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 @@
</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;

View File

@@ -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;
});
});
});