前端jQuery火箭图标返回页面顶部代码

最新推荐文章于 2020-12-10 00:11:07 发布

ghjzzhg

最新推荐文章于 2020-12-10 00:11:07 发布

阅读量437

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前台页面类文章标签：火箭 jQUery 返回顶部

本文链接：https://blog.youkuaiyun.com/ghjzzhg/article/details/88667146

前台页面类专栏收录该内容

45 篇文章

订阅专栏

博客分享了JS页面相关资源，包含zzsc.js、zzsc.css文件以及一个png文件，还提供了代码资源链接https://download.youkuaiyun.com/download/ghjzzhg/11044793 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery火箭图标返回顶部代码</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js?v=1.83.min" type="text/javascript"></script>
<script src="js/zzsc.js"></script>
</head>
<body>
<center>
<h2>jQuery火箭图标返回顶部代码</h2>
<h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>
</center>
<div style="display: none;" id="rocket-to-top">
<div style="opacity:0;display: block;" class="level-2"></div>
<div class="level-3"></div>
</div>
</div>
</body>
</html>

JS页面

zzsc.js

$(function() {
	var e = $("#rocket-to-top"),
	t = $(document).scrollTop(),
	n,
	r,
	i = !0;
	$(window).scroll(function() {
		var t = $(document).scrollTop();
		t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
			marginTop: "-1000px"
		},
		"normal",
		function() {
			e.css({
				"margin-top": "-125px",
				display: "none"
			}),
			i = !0
		})) : e.fadeIn("slow")
	}),
	e.hover(function() {
		$(".level-2").stop(!0).animate({
			opacity: 1
		})
	},
	function() {
		$(".level-2").stop(!0).animate({
			opacity: 0
		})
	}),
	$(".level-3").click(function() {
		function t() {
			var t = e.css("background-position");
			if (e.css("display") == "none" || i == 0) {
				clearInterval(n),
				e.css("background-position", "0px 0px");
				return
			}
			switch (t){
			case "0px 0px":
				e.css("background-position", "-298px 0px");
				break;
			case "-298px 0px":
				e.css("background-position", "-447px 0px");
				break;
			case "-447px 0px":
				e.css("background-position", "-596px 0px");
				break;
			case "-596px 0px":
				e.css("background-position", "-745px 0px");
				break;
			case "-745px 0px":
				e.css("background-position", "-298px 0px");
			}
		}
		if (!i) return;
		n = setInterval(t, 50),
		$("html,body").animate({scrollTop: 0},"slow");
	});
});

zzsc.css

*{list-style:none;border:0;}
body{height:3000px;}
#rocket-to-top div {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#rocket-to-top .level-2 {
    background: url("../images/rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#rocket-to-top .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#rocket-to-top {
    background: url("../images/rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 80%;
    width: 149px;
    z-index: 11;
}

最后还有一个png的文件