一、首先在html页面设置如下代码
<div class="top" id="btn-scrollup" style="display: none">
<span title="Top" id="topArrow"></span>
</div>
二、然后设置css样式,代码如下:
.top{
width: 50px;
height: 100px;
background-color: rgba(65,105,225,0.5);
border-radius: 10px;
position: fixed;
right: 100px;
bottom: 40%;
}
.top #topArrow{
width: 30px;
height: 30px;
border-top: 2px solid #fff;/*利用border和rotate绘制向上的箭头*/
border-left: 2px solid #fff;
display: inline-block;
transform: translate(9px,35px) rotate(45deg);
cursor: pointer;
z-index: 1000;/*避免被其他div遮盖*/
}
.top #topArrow:hover {
border-width: 4px;
}
/**回顶部按钮 end**/
三、jquery代码,带html页面引入就行了
( function( $ ) {
$(document).ready(function($){
$('#main-nav').meanmenu({
meanScreenWidth: "1050",
meanMenuContainer: ".main-navigation-wrapper",
meanRevealPosition: "left",
});
// Go to top.
var $scroll_obj = $( '#btn-scrollup' );
$( window ).scroll(function(){
if ( $( this ).scrollTop() > 800 ) {
$scroll_obj.fadeIn();
} else {
$scroll_obj.fadeOut();
}
});
$scroll_obj.click(function(){
$( 'html, body' ).animate( { scrollTop: 0 }, 600 );
return false;
});
});
} )( jQuery );
四、结果样式: