锚点

一、介绍

有两种使用<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>

效果如下：点我查看

正美用锚点做了这样一个效果：

代码如下：

<!doctype html>
<html>
  <title>锚点 by starof</title>
  <meta charset="utf-8"/>
  <style type="text/css">
dl {/*相册*/
  position:relative;
  width:160px;
  height:142px;
  border:10px solid #EFEFDA;/*相册边框*/
}
dd {/*相册的内容显示区，包含相片与下面的翻页栏*/
  margin:0;/*去除浏览器的默认设置*/
  padding:0;/*去除浏览器的默认设置*/
  width:160px;
  height:120px;
  overflow:hidden;/*重点，让每次只显示一张图片*/
}
img {
  border:2px solid #000;/*增加立体感*/
}
dt {/*翻页栏*/
  position:absolute;
  right:0px;
  bottom:0px;
  /*上面三步是用于把它固定于图片下方*/
  width:160px;
  height:22px;
  background:#FBFBEA;
}
a {
   display:block;/*让其拥有盒子模型*/
   float:right;
   margin:2px;/*错开格子*/
   width:18px;/*呈正方形*/
   height:18px;
   text-align:center;/*居中显示*/
   color:#fff;/*默认是蓝色，所以一定要重写*/
   text-decoration:none;/*消除下划线*/
   background:#666;
   filter:alpha(opacity=70);
   opacity:.7;
 }
 a:hover {
   background:#000
 }
</style>
<body>
<dl>
<dt>
  <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a>
</dt>
<dd>
 <img id="index1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" />
    <img id="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" />
    <img id="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" />
    <img id="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" />
    <img id="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" />
    <img id="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" />
  </dd>
</dl>
</body>
</html>