起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小時內與您取得聯系。