锚点实现一：a标签

添加a标签用来实现锚点，点击分类，页面类别内容滑动到该类别下方
其中可以修改a标签的top样式，以改变类别内容与分类的距离

<div class="con_box">
	<ul class="tab_menu">
		<li class="">
			<a name="" href="#descrip_section">Description</a>
		</li>
		<li>
			<a href="#parameter_section">Parameter</a>
		</li>
		<li>
			<a href="#matching_section">Matching Products</a>
		</li>
	</ul>
	<a name="descrip_section" style="position: relative;top: -100px; "></a>

	<div class="descrip_box proDetail_box">
		<h2 class="tit">Description</h2>
		<div class="descrip_con">
			DescriptionDescriptionDescriptionDescriptionDescription
		</div>
	</div>
	<a name="parameter_section" style="position: relative;top: -100px; "></a>
	<div class="parameter_box proDetail_box">
		<h2 class="tit">Parameter</h2>

		<div class="parameter_con">
			<!--{dede:field.canshu_001/}-->
			<div class="pro_data">
				<div class="pro_datacon">
					ParameterParameterParameterParameterParameter
				</div>

			</div>
		</div>
	</div>
	<a name="matching_section" style="position: relative;top: -100px; display:block; height:0px; overflow:hidden"></a>
	<div class="matching_box proDetail_box">
		<h2 class="tit">Matching Products</h2>

		<div class="matching_con">
			Matching ProductsMatching ProductsMatching ProductsMatching ProductsMatching Products
		</div>
	</div>
</div>

这里就简单写了一下css样式

* {
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #333;
}
li{
	list-style: none;
}
.con_box {
	padding-top: 100px;
	padding-bottom: 300px;
}
.tab_menu {
	width: 600px;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -300px;
}
.tab_menu a {
	line-height: 36px;
	display: inline-block;
	width: 100%;
}
.tab_menu li {
	float: left;
	width: 33.33333%;
	font-weight: bold;
	font-family: 'Conv_Helvetica', Arial;
	height: 36px;
	line-height: 36px;
	font-size: 16px;
	text-align: center;
	background: #d0d0d0;
	cursor: pointer;
}
.con_box>div.descrip_box {
	height: 300px;
	background-color: #F3F3F3;
}
.con_box>div.parameter_box {
	height: 500px;
	background-color: #fff;
}
.con_box>div.matching_box {
	height: 500px;
	background-color: #F3F3F3;
}

效果：
点击分类页面分别滑动到对应的位置