錨點
錨點的基本使用場景
當一個網頁很長的時候，那么我們在翻閱這個網頁的時候可能會有些不方便，比如我們已經翻閱到了底部之后想返回到頂部，那么只能拖動滾動條到頂部（或者刷新頁面，但這個不是專業的做法），效果比較好的方法就是設置錨點來處理這個問題。
那么錨點如何設置呢？見如下代碼：
<!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>