锚点
锚点的基本使用场景
当一个网页很长的时候，那么我们在翻阅这个网页的时候可能会有些不方便，比如我们已经翻阅到了底部之后想返回到顶部，那么只能拖动滚动条到顶部（或者刷新页面，但这个不是专业的做法），效果比较好的方法就是设置锚点来处理这个问题。
那么锚点如何设置呢？见如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#bottom" name="top">去底部</a>
<div style="height: 5000px; width: 300px; background-color: #123"></div>
<a href="#top" name="bottom">回到顶部</a>
</body>
</html>
这里就有两个锚点，一个名字叫做top，一个名字叫做bottom，其实a标签比较特殊，可以用name属性值来指定锚点的名称（当然也可以通过id值来指定锚点名称），其他标签只能通过id值来指定锚点名称，当id值为空的时候，默认锚点名称为#，即点击之后就是定位到本网页。
在以上代码中，锚点的使用可能不够合适，正确的做法是把锚点的position属性设置为fixed，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#control {
position: fixed;
left: 310px;
width: 100px;
height: 65px;
background-color: #ffa;
}
</style>
</head>
<body>
<div id="control">
<li><a href="#top">top</a></li>
<li><a href="#mid">mid</a></li>
<li><a href="#bottom">bottom</a></li>
</div>
<div id="top"></div>
<div style="height: 1000px; width: 300px; background-color: yellow"></div>
<div id="mid"></div>
<div style="height: 1000px; width: 300px; background-color: red"></div>
<div id="bottom"></div>
</body>
</html>
锚点的知识拓展
可以定位到本地其他html文件的一个锚点，也可以定位到外部网站的某个html文件的一个锚点（有ID属性的标签），代码示例如下：
01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="02.html#bottom">点击跳转到本地网页的一个锚点</a>
<a href="http://www.sohu.com#god_1">点击跳转到外部网页的一个锚点</a>
</body>
</html>
在转到外部网站的界面的时候，这里选择了转到搜狐主页的一个锚点god_1，通过实验可以发现，右边滚动条确实不在最顶端，证明发生了定向。
02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#bottom" name="top">去底部</a>
<div style="height: 5000px; width: 300px; background-color: #123"></div>
<a href="#top" name="bottom">回到顶部</a>
</body>
</html>
