一、介绍
有两种使用<a>标签的方式：
1、通过href属性——创建指向另一个文档的链接
2、通过使用name属性——创建文档内的书签
name属性规定锚(anchor)的名称。
1、name定位
使用name，只能在<a>标签上用，所以总结为“a标签+name属性”。
2、ID定位
使用id可以在任意标签使用。
3、js定位
使用js使用scroollIntoView将对象滚动到可见范围内。
例子如下：“到top”使用id，“到content”使用a标签+name属性，“到bottom”使用js代码。
<!doctype html>
<html>
<title>锚点 by starof</title>
<meta charset="utf-8"/>
<style type="text/css">
.cls1,.cls2,.cls3{
500px;
height: 600px;
}
.cls1{
background-color: red;
}
.cls2{
background-color: green;
}
.cls3{
background-color: blue;
}
</style>
<body>
<a href="#top">到top</a><br/>
<a href="#content">到content</a><br/>
<a onclick="javascript:document.getElementById('here').scrollIntoView()" style="cursor:pointer;">到bottom</a>
<div id="top" class="cls1">top内容
</div>
<div name="content" class="cls2"><a name="content">content内容</a><br/>
name属性只对<a>标签有用。<br/>
可以通过给div增加name="content" ，删除内部超链接查看。
</div>
<div id="here" class="cls3">bottom内容
</div>
</body>
<script type="text/javascript">
</script>
</html>
二、用锚点实现的选项卡效果
张鑫旭有这样一个demo，代码：
<!doctype html>
<html>
<title>锚点 by starof</title>
<meta charset="utf-8"/>
<style type="text/css">
.box{
200px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}
.list{
200px;
height: 100px;
line-height: 100px;
background-color: #eee;
font-size: 80px;
text-align: center;
}
.link{
200px;
padding-top:10px;
text-align:right;}
.click{
display:inline-block;
20px;
height:20px;
line-height:20px;
border:1px solid #ccc;
background:#f7f7f7;
color:#333;
font-size:12px;
font-weight:bold;
text-align:center;
text-decoration:none;}
.click:hover{
background:#eee;
color:#345;}
</style>
<body>
<div class="box">
<div class="list" id="one">1</div>
<div class="list" id="two">2</div>
<div class="list" id="three">3</div>
<div class="list" id="four">4</div>
</div>
<div class="link">
<a class="click" href="#one">1</a>
<a class="click" href="#two">2</a>
<a class="click" href="#three">3</a>
<a class="click" href="#four">4</a>
</div>
<script type="text/javascript"></script>
</body>
</html>
效果如下：点我查看
正美用锚点做了这样一个效果：
代码如下：
View Code效果：
另参考
http://www.impressivewebs.com/javascript-content-switcher-without-javascript/ http://www.impressivewebs.com/demo-files/content-switcher/#five