制作网页中回到顶部的悬浮按钮的简单例子

一、首先在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 );

四、结果样式:

分享到: