锚点

一、介绍

有两种使用<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{
  width: 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属性只对&lt;a&gt;标签有用。<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{
  width: 200px;
  height: 100px;
  border: 1px solid #ddd; 
  overflow: hidden;
}
.list{
  width: 200px;
  height: 100px;
  line-height: 100px;
  background-color: #eee;
  font-size: 80px;
  text-align: center;
}
.link{
     width:200px;
     padding-top:10px;
     text-align:right;}
.click{
  display:inline-block; 
  width: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>

效果如下：点我查看