jquery特效-淘宝聚惠11.11效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!--css , js-->
<style type="text/css">
*{margin:0px;padding:0px;}
#louti{width:120px; position:fixed; left:20px; bottom:0px;}
#louti ul li{height:38px; line-height:38px;font-size:14px; text-align:center; list-style-type:none;
background:url("pic/bg1.png") no-repeat 110px 16px;}
#louti ul li a{color:#fff; font-family:"微软雅黑"; text-decoration:none;}
#louti ul li.gray1{background-color:#1f1a23;}
#louti ul li.gray2{background-color:#2f2f2f;}
#louti ul li.gray3{background-color:#f93470;}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{font-size:40px; color:#fff;height:500px; text-align:center; }
#box1{background:#f93470; }
#box2{ background:#34f942; }
#box3{ background:#f99134; }
#box4{ background:#2e27c6; }
#box5{ background:#601171; }
#box6{ background:#f93470;}
#box7{ background:#34f942; }
#box8{background:#2e27c6;}
</style>
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!--css , js-->
<style type="text/css">
*{margin:0px;padding:0px;}
#louti{width:120px; position:fixed; left:20px; bottom:0px;}
#louti ul li{height:38px; line-height:38px;font-size:14px; text-align:center; list-style-type:none;
background:url("pic/bg1.png") no-repeat 110px 16px;}
#louti ul li a{color:#fff; font-family:"微软雅黑"; text-decoration:none;}
#louti ul li.gray1{background-color:#1f1a23;}
#louti ul li.gray2{background-color:#2f2f2f;}
#louti ul li.gray3{background-color:#f93470;}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{font-size:40px; color:#fff;height:500px; text-align:center; }
#box1{background:#f93470; }
#box2{ background:#34f942; }
#box3{ background:#f99134; }
#box4{ background:#2e27c6; }
#box5{ background:#601171; }
#box6{ background:#f93470;}
#box7{ background:#34f942; }
#box8{background:#2e27c6;}
</style>
</head>
<body>
<body>
<!--楼梯式栏目导航 start-->
<div id="louti">
<img src="pic/xxpic.png" />
<ul>
<li class="gray3"><a href="#">服装服饰专场</a></li>
<li><a href="#">鞋包户外专场</a></li>
<li><a href="#">美妆配饰专场</a></li>
<li><a href="#">数码/食品专场</a></li>
<li><a href="#">优质团购专场</a></li>
<li><a href="#">母婴/家居专场</a></li>
<li><a href="#">淘宝热卖专场</a></li>
<li><a href="#">低价购车专场</a></li>
</ul>
<img class="top" src="pic/top.png" />
</div>
<!--楼梯式栏目导航 end-->
<div id="louti">
<img src="pic/xxpic.png" />
<ul>
<li class="gray3"><a href="#">服装服饰专场</a></li>
<li><a href="#">鞋包户外专场</a></li>
<li><a href="#">美妆配饰专场</a></li>
<li><a href="#">数码/食品专场</a></li>
<li><a href="#">优质团购专场</a></li>
<li><a href="#">母婴/家居专场</a></li>
<li><a href="#">淘宝热卖专场</a></li>
<li><a href="#">低价购车专场</a></li>
</ul>
<img class="top" src="pic/top.png" />
</div>
<!--楼梯式栏目导航 end-->
<div id="box1">服装服饰专场</div>
<div id="box2">鞋包户外专场</div>
<div id="box3">美妆配饰专场</div>
<div id="box4">数码/食品专场</div>
<div id="box5">优质团购专场</div>
<div id="box6">母婴/家居专场</div>
<div id="box7">淘宝热卖专场</div>
<div id="box8">低价购车专场</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#louti ul li:even").addClass("gray1");
$("#louti ul li:odd").addClass("gray2");
$("#louti ul li").click(function(){
$(this).addClass("gray3").siblings().removeClass("gray3");
var index = $(this).index()+1;
var $target = $("#box"+index);
var top = $target.offset().top;
$("body,html").stop(true,true).animate({"scrollTop":top});
});
<script type="text/javascript">
$("#louti ul li:even").addClass("gray1");
$("#louti ul li:odd").addClass("gray2");
$("#louti ul li").click(function(){
$(this).addClass("gray3").siblings().removeClass("gray3");
var index = $(this).index()+1;
var $target = $("#box"+index);
var top = $target.offset().top;
$("body,html").stop(true,true).animate({"scrollTop":top});
});
$(".top").click(function(){
$("body,html").stop(true,true).animate({"scrollTop":0});
});
</script>
</body>
</html>
$("body,html").stop(true,true).animate({"scrollTop":0});
});
</script>
</body>
</html>