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

mask天俊

于 2015-08-16 10:25:17 发布

阅读量1k

点赞数

分类专栏： js效果文章标签： js web前端效果

本文链接：https://blog.csdn.net/u013107927/article/details/47700401

版权

本文介绍如何使用jQuery创建一个页面滚动时显示的小火箭，点击该火箭即可平滑返回页面顶部。通过监听mousewheel事件，当页面不在顶部时显示火箭，并确保其click事件不重复绑定，提供顺畅的用户体验。

摘要由CSDN通过智能技术生成

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

代码和布局都很简单

<!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",fun