整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
起html的錨點這個概念，你可能會感到會陌生，感覺自己沒有聽過。但是如果說起它的作用，你可能就恍然大悟了，就像你說起一個演員，可能不知道是誰，但是說起它演的一個角色可能立馬就知道那個人是誰了。
那么，什么是錨點呢？
錨點存在于html中，在默認情況下，可以快速的定位到指定元素，并將元素置于頁面最頂端。當然我們可以按照自己的需求來確定錨點的位置，不一定要讓其定位在頂部。現如今有無數多的頁面已經用上了錨點，比如Vue.js的官網，在我們點擊標題“Vue.js是什么”和標題“起步”的時候，標題都會自動移到頁面頂端。
錨點的使用
那接下來，我們就來看看幾種錨點的使用方法。
id定位
最基本的使用方法如下，當點擊<a>標簽時，頁面會相應的將該div內容置頂
錨點的id定位方法
name定位
除了id，還可以通過name進行定位，不過需要主要的是，如果采用name屬性進行定位的話，只適用于a標簽，類似于p標簽等都不支持。
錨點的name定位方法
javascript代碼進行定位
在原生的javascript中，有一個scrollIntoView()方法，可以實現頁面的錨點
javascript方法實現錨點
一個綜合的例子
講了三種實現方法后，接下來看一個實際運用的例子。首先是實際效果圖，在點擊左側欄時，頁面右邊會相應的顯示指定段落的內容
錨點的實際使用
首先看下html頁面的內容，左側的ul代碼
左側的ul代碼
右側的內容部分代碼
右側內容部分代碼
css部分的代碼
css部分的代碼
將上述的代碼寫在一個html文件中，便可實現左側欄點擊，右側欄顯示相應內容的效果。
特殊情況
在實際項目中，我們總會遇到這樣一種情況，在頁面頂部有固定頭內容的時候，如果直接使用上述方法，會得不到想要的效果
直接使用錨點的效果圖
通過該圖可以看出，第三段內容的標題被遮住了，實際應該往下再顯示一點
那么，我們該怎么解決這個問題呢？在這里我想到了兩種方法，第一種是在每個內容div上加一個隱藏的p元素，給p元素一個定高，再向上偏移，這種方法會導致頁面出現很多個多余的p元素，不推薦使用。
第二種是利用偽元素，偽元素可以占用實際的高度，這是推薦使用的方法
偽元素的樣式
通過給h3標簽添加偽元素樣式，可完美解決這個問題，效果圖如下
使用偽元素后的效果圖
總結
今天的內容你會了么？如果還沒有掌握的話，可以按照文章中的代碼，進行實踐，代碼總是要多敲才更容易理解。
如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。
、頁面內跳轉的錨點設置
頁面內的跳轉需要兩步：
方法一：
①：設置一個錨點鏈接<a href="#miao">去找喵星人</a>；（注意：href屬性的屬性值最前面要加#）
②：在頁面中需要的位置設置錨點<a name="miao"></a>；（注意：a標簽中要寫一個name屬性，屬性值要與①中的href的屬性值一樣，不加#）標簽中按需填寫必要的文字，一般不寫內容
方法二：
①：同方法一的①
②：設置錨點的位置 <h3 id="miao">喵星人基地</h3>；在要跳轉到的位置的標簽中添加一個id屬性，屬性值與①中href的屬性值一樣，不加#
方法二不用單獨添加一個a標簽來專門設置錨點 ，只在需要的位置的標簽中添加一個id即可。
小案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>萌寵集結號</title>
</head>
<body>
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--設置錨點方法1-->
<h3 id="miao">喵星人基地</h3><!--設置錨點方法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
二、跨頁面跳轉
①：設置錨點鏈接，在href中的路徑后面追加：#+錨點名，即可
如：<a href="萌寵集結號.html#miao">跳轉到萌寵集結號頁面</a>
②：要跳轉到的頁面中要設置錨點，方法見一種的步驟②，兩個方法任選其一。
我們在瀏覽一個網頁的時候，通常會遇到比較長的網頁，一直向下拉滾動條一直向下，而在最底部的位置通常會有一個一鍵返回到頂部
或者返回到哪里的按鈕，這個按鈕就是利用的 錨點鏈接 功能。
就兩個值：第一個就是錨點下在哪里？第二個就是點在哪里？
<body>
<!-- 2、跳轉的目標位置：點-->
<a id="test">這里是頂部</a>
<!-- 1、跳轉的按鈕：錨-->
<a href="#test">回到頂部</a>
</body>源代碼：↓
備注：如果手機上看格式錯亂，建議粘貼到電腦版編輯器里觀看。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
