$(".suspension .a-top").click(function () {
$("html,body").animate({scrollTop: 0});
return false;
});
$(".suspension .a-bottom").click(function () {
$("html,body").animate({scrollTop: $(document).height()}, 1000);
return false;
});
$(window).scroll(function () {
var st = $(document).scrollTop();
var $top = $(".suspension .a-top,.suspension .a-bottom");
if (st > 100) {
$top.css({display: 'block'});
} else {
if ($top.is(":visible")) {
$top.hide();
}
}
})
<div class="suspension">
<div class="suspension-box">
<a href="#" class="a a-top">
<i class="fa fa-angle-double-up i" aria-hidden="true"></i>
</a>
</div>
<div class="suspension-box">
<a href="#" class="a a-bottom">
<i class="fa fa-angle-double-down i" aria-hidden="true"></i>
</a>
</div>
</div>
.suspension{
position:fixed;
z-index:55;
bottom:85px;
width:44px;
height:50%;
right: 10px;
}
.suspension-box{
position:relative;
float:right;
}
.suspension .a{
text-align: center;
display: block;
vertical-align: middle;
line-height: 44px;
width:44px;
height:44px;
background-color:#353535;
margin-bottom:4px;
cursor:pointer;
outline:none;
}
.suspension .a .i{
width:44px;
height:44px;
color: #fff;
font-size: 25px;
}
.suspension .a-top,.suspension .a-bottom{
background:#D2D3D6;
display:none;
}
.suspension .a-top:hover,.suspension .a-bottom:hover{
background:#c0c1c3;
}