以下是 jquery a标签锚点定位特效js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jquery a标签锚点定位特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/requirement.css" rel="stylesheet" type="text/css">
<script src="jquery/jquery-1.6.2.min.js"></script>
<script src="jquery/requirement.js"></script>
</head>
<body>
<div class="user-right-box" style="width:950px;margin: 0px auto;margin-top:10px;">
<h4 style="margin:0px;passing:0px;">类似于锚点连接的效果</h4>
<div class="require_top">
<div class="re_t" catid="0" style="background:#f8659c;">
服装内衣
</div>
<div class="re_t" catid="1" style="background:#dd3336;">
鞋包配饰
</div>
<div class="re_t" catid="2" style="background:#9db5b5;">
运动户外
</div>
<div class="re_t" catid="3" style="background:#1b78fb;">
珠宝手表
</div>
<div class="re_t" catid="4" style="background:#436c9a">
手机数码
</div>
<div class="re_t" catid="5" style="background:#1a78ff">
家电办公
</div>
<div class="re_t" catid="6" style="background:#f44321">
护肤彩妆
</div>
<div class="re_t" style="margin-right:0px;background:#9965f6;" catid="7">
母婴用品
</div>
<div class="re_t" catid="8" style="background:#f5649b">
家纺居家
</div>
<div class="re_t" catid="9" style="background:#faa33c">
家居建材
</div>
<div class="re_t" catid="10" style="background:#36c6eb">
美食特产
</div>
<div class="re_t" catid="11" style="background:#9bcf50;">
日用百货
</div>
<div class="re_t" catid="12" style="background:#ff5b31;">
汽车摩托
</div>
<div class="re_t" catid="13" style="background:#fea42c;">
文化娱乐
</div>
<div class="re_t" catid="14" style="background:#ff7d33;">
本地生活
</div>
<div class="re_t" style="margin-right:0px;background:#5d82d2;" catid="15">
虚拟服务
</div>
<div class="clear"></div>
</div>
<!-- items 参数意义 catid:分类ID(从0开始) tipID:一级菜单ID 【 className:r_b_c_0 (0表示分类id) 】 itemID:二级菜单ID -->
<div class="require_bottom">
<!-- 0 -->
<div>
<div class="require_b_t" catid="0">
服装内衣
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_0" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="0">1背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 1 -->
<div>
<div class="require_b_t" catid="1">
鞋包配饰
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_1" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="15">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 2 -->
<div>
<div class="require_b_t" catid="2">
运动户外
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_2" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="16">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 3 -->
<div>
<div class="require_b_t" catid="3">
珠宝手表
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_3" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="17">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 4 -->
<div>
<div class="require_b_t" catid="4">
手机数码
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_4" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="18">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 5 -->
<div>
<div class="require_b_t" catid="5">
家电办公
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_5" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="19">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 6 -->
<div>
<div class="require_b_t" catid="6">
护肤彩妆
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_6" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="20">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 7 -->
<div>
<div class="require_b_t" catid="7">
母婴用品
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_7" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="21">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 8 -->
<div>
<div class="require_b_t" catid="8">
家纺居家
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_8" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="22">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 9 -->
<div>
<div class="require_b_t" catid="9">
家居建材
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_9" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="23">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 10 -->
<div>
<div class="require_b_t" catid="10">
美食特产
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_10" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="24">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 11 -->
<div>
<div class="require_b_t" catid="11">
日用百货
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_11" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="25">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 12 -->
<div>
<div class="require_b_t" catid="12">
汽车摩托
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_12" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="26">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 13 -->
<div>
<div class="require_b_t" catid="13">
文化娱乐
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_13" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="27">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 14 -->
<div>
<div class="require_b_t" catid="14">
本地生活
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_14" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="28">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 15 -->
<div>
<div class="require_b_t" catid="15">
虚拟服务
</div>
<div class="require_b_c">
<div class="require_b_cl r_b_c_15" tipID="0">
<span>男装</span>
</div>
<div class="require_b_cr">
<ul>
<li>
<a href="javascript:;" itemID="29">2背心/马甲</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- e -->
</div>
<!-- s -->
<div style="position: fixed;bottom: 0px;">
<!-- 展开 -->
<div class="require_b_b">
<div class="require_b_bl">
已选需求
</div>
<div class="require_b_bc require_b_bc1">
</div>
<div class="clear"></div>
</div>
<!-- 收起 -->
<div class="require_tanceng" style="display:none" >
<div class="t_title">已选需求</div>
<div class="t_main">
<div class="require_b_cl1">
男装
</div>
<div class="require_b_bc require_b_bc2" style="width:914px;">
<!--<dl>
<dt>外套</dt>
<dd><img src="image/edix_03.png"/></dd>
</dl>-->
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(requirement.js):
$(function(){
//分类$(".re_t").live("click",function(){
var catid=$(this).attr("catid");
var top=$(".require_bottom div[catid='"+catid+"']").offset().top;
$(window).scrollTop(top);
}
);
}
);
CSS代码(reset.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* add */
body,input,select,textarea{font-family:"Microsoft YaHei","SimSun","Tahoma",sans-serif;font-size:12px;color:#666666;}
img{border:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
.clear{display:block !important;clear:both !important;float:none !important;margin:0 !important;padding:0 !important;height:0;line-height:0;font-size:0;overflow:hidden;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display:block;clear:both;height:0;}
.spacer{clear:both;font-size:0;height:0;line-height:0;}
a{color:#333;text-decoration:none}
分享到QQ
分享到微博
微信扫一扫
