用jquery实现小火箭到页面顶部的效果

叁歲伎倆 2022-08-04 04:06 113阅读 0赞

恩，不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭，点击这个小火箭就可以慢慢回到页面顶部，闲的没事，自己搞了一下

代码和布局都很简单

<!DOCTYPE HTML>
    <html>
    	<head>
    		<style>
    			#content{
    				height: 2000px ;
    				width: 960px ;
    				margin: 0 auto ;
    				background-color: blue ;
    			}
    			#rocket{
    				width: 50px ;
    				height: 50px ;
    				position: fixed;
    				right: 10px ;
    				bottom: 10px ;
    				display: none;
    			}
    			#rocket img{
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    	</head>
    	<body>
    		<div id="layout">
    			<div id="content"></div>
    			<div id="rocket"><img src="./img/rocket.png"></div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		document.addEventListener("mousewheel",function(){
    			if(document.body.scrollTop!=0)
    			{
    				$("body").stop();
    				$('#rocket').unbind().bind('click',up);
    				$("#rocket").css('display', 'block');
    			}
    		},false) ;
    		function up(){
    			$("body").animate({scrollTop:"0"},2000,function(){
    				$("#rocket").css('display', 'none');
    				$('#rocket').bind('click',up);
    			});
    			$('#rocket').unbind("click");
    		}
    	</script>
    </html>

主要思路是这样的，利用position：fixed将我们的小火箭固定在屏幕的右下角，先把display设置成none来隐藏小火箭，因为页面在顶部的时候我们不需要它~

#rocket{
    				width: 50px ;
    				height: 50px ;
    				position: fixed;
    				right: 10px ;
    				bottom: 10px ;
    				display: none;
    			}

好的，然后我们来监听鼠标的滚动事件（mousewheel），添加一个判断如果页面不在顶部就使小火箭现形，并为其添加click事件。这里注意要把body的动画stop掉，因为如果在火箭上升的时候用户滑动滚轮就表明用户想停在那里，还有就是rocket的事件要先unbind在bind，不然会导致多次添加事件。

document.addEventListener("mousewheel",function(){
    			if(document.body.scrollTop!=0)
    			{
    				$("body").stop();
    				$('#rocket').unbind().bind('click',up);
    				$("#rocket").css('display', 'block');
    			}
    		},false) ;

小火箭的点击事件是执行一个body的scrollTop属性的动画，因为body的crollTop就是我们的可视区域到页面顶部的距离。一开始执行我们就把它的click事件又unbind掉，不然点击又会执行，造成多次执行，还有就是在动画结束的回调函数中我们将小火箭再次隐藏并绑定点击事件。

大概就是这样，很简单吧~