jQuery火箭图标返回顶部滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery火箭图标返回顶部滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
</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");
}
);
}
);

CSS代码(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;}

附件:下载该文件资源,减少时间成本(增值服务)