CSS代码:
.move-up {
position: fixed;
z-index:399;
display: none;
color: #fafafa;
left: auto !important;
right: 30px !important;
opacity: .35;
}
.move-up button {
border:none;
background: #6b6b6b;
}
.move-up {
bottom: 20px;
right: 30px;
}
.move-up button {
border-radius: 3px;
width: 35px;
height: 35px;
}
.move-up button:active:hover {
padding-right:4px !important;
margin-right:2px;
}
正文代码:
<form class="move-up" action="#up" style="display: block;">
<button>
<svg class="fa d-icon d-icon-chevron-up svg-icon svg-node" aria-hidden="true"><use xlink:href="#chevron-up"></use></svg>
</button>
</form>
<script>
$(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;
});
});
});
</script>