一、首先在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 );
四、结果样式: