神奇的html錨點(diǎn)，讓你的網(wǎng)頁(yè)在內(nèi)部自由的跳轉(zhuǎn)

起html的錨點(diǎn)這個(gè)概念，你可能會(huì)感到會(huì)陌生，感覺(jué)自己沒(méi)有聽(tīng)過(guò)。但是如果說(shuō)起它的作用，你可能就恍然大悟了，就像你說(shuō)起一個(gè)演員，可能不知道是誰(shuí)，但是說(shuō)起它演的一個(gè)角色可能立馬就知道那個(gè)人是誰(shuí)了。

那么，什么是錨點(diǎn)呢？

錨點(diǎn)存在于html中，在默認(rèn)情況下，可以快速的定位到指定元素，并將元素置于頁(yè)面最頂端。當(dāng)然我們可以按照自己的需求來(lái)確定錨點(diǎn)的位置，不一定要讓其定位在頂部。現(xiàn)如今有無(wú)數(shù)多的頁(yè)面已經(jīng)用上了錨點(diǎn)，比如Vue.js的官網(wǎng)，在我們點(diǎn)擊標(biāo)題“Vue.js是什么”和標(biāo)題“起步”的時(shí)候，標(biāo)題都會(huì)自動(dòng)移到頁(yè)面頂端。

錨點(diǎn)的使用

那接下來(lái)，我們就來(lái)看看幾種錨點(diǎn)的使用方法。

id定位

最基本的使用方法如下，當(dāng)點(diǎn)擊<a>標(biāo)簽時(shí)，頁(yè)面會(huì)相應(yīng)的將該div內(nèi)容置頂

錨點(diǎn)的id定位方法

name定位

除了id，還可以通過(guò)name進(jìn)行定位，不過(guò)需要主要的是，如果采用name屬性進(jìn)行定位的話，只適用于a標(biāo)簽，類(lèi)似于p標(biāo)簽等都不支持。

錨點(diǎn)的name定位方法

javascript代碼進(jìn)行定位

在原生的javascript中，有一個(gè)scrollIntoView()方法，可以實(shí)現(xiàn)頁(yè)面的錨點(diǎn)

javascript方法實(shí)現(xiàn)錨點(diǎn)

一個(gè)綜合的例子

講了三種實(shí)現(xiàn)方法后，接下來(lái)看一個(gè)實(shí)際運(yùn)用的例子。首先是實(shí)際效果圖，在點(diǎn)擊左側(cè)欄時(shí)，頁(yè)面右邊會(huì)相應(yīng)的顯示指定段落的內(nèi)容

錨點(diǎn)的實(shí)際使用

首先看下html頁(yè)面的內(nèi)容，左側(cè)的ul代碼

左側(cè)的ul代碼

右側(cè)的內(nèi)容部分代碼

右側(cè)內(nèi)容部分代碼

css部分的代碼

將上述的代碼寫(xiě)在一個(gè)html文件中，便可實(shí)現(xiàn)左側(cè)欄點(diǎn)擊，右側(cè)欄顯示相應(yīng)內(nèi)容的效果。

特殊情況

在實(shí)際項(xiàng)目中，我們總會(huì)遇到這樣一種情況，在頁(yè)面頂部有固定頭內(nèi)容的時(shí)候，如果直接使用上述方法，會(huì)得不到想要的效果

直接使用錨點(diǎn)的效果圖

通過(guò)該圖可以看出，第三段內(nèi)容的標(biāo)題被遮住了，實(shí)際應(yīng)該往下再顯示一點(diǎn)

那么，我們?cè)撛趺唇鉀Q這個(gè)問(wèn)題呢？在這里我想到了兩種方法，第一種是在每個(gè)內(nèi)容div上加一個(gè)隱藏的p元素，給p元素一個(gè)定高，再向上偏移，這種方法會(huì)導(dǎo)致頁(yè)面出現(xiàn)很多個(gè)多余的p元素，不推薦使用。

第二種是利用偽元素，偽元素可以占用實(shí)際的高度，這是推薦使用的方法

偽元素的樣式

通過(guò)給h3標(biāo)簽添加偽元素樣式，可完美解決這個(gè)問(wèn)題，效果圖如下

使用偽元素后的效果圖

總結(jié)

今天的內(nèi)容你會(huì)了么？如果還沒(méi)有掌握的話，可以按照文章中的代碼，進(jìn)行實(shí)踐，代碼總是要多敲才更容易理解。

如果喜歡的話，記得關(guān)注小編噢，小編后續(xù)會(huì)堅(jiān)持出更多技術(shù)性的文章，如果有任何問(wèn)題，也歡迎提問(wèn)，小編都會(huì)盡力解答的。

、頁(yè)面內(nèi)跳轉(zhuǎn)的錨點(diǎn)設(shè)置

頁(yè)面內(nèi)的跳轉(zhuǎn)需要兩步：

方法一：

①：設(shè)置一個(gè)錨點(diǎn)鏈接<a href="#miao">去找喵星人</a>；（注意：href屬性的屬性值最前面要加#）

②：在頁(yè)面中需要的位置設(shè)置錨點(diǎn)<a name="miao"></a>；（注意：a標(biāo)簽中要寫(xiě)一個(gè)name屬性，屬性值要與①中的href的屬性值一樣，不加#）標(biāo)簽中按需填寫(xiě)必要的文字，一般不寫(xiě)內(nèi)容

方法二：

①：同方法一的①

②：設(shè)置錨點(diǎn)的位置 <h3 id="miao">喵星人基地</h3>；在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加一個(gè)id屬性，屬性值與①中href的屬性值一樣，不加#

方法二不用單獨(dú)添加一個(gè)a標(biāo)簽來(lái)專門(mén)設(shè)置錨點(diǎn) ，只在需要的位置的標(biāo)簽中添加一個(gè)id即可。

小案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<ul>

<li><a href="#miao">去找喵星人</a></li>

<li><a href="#wang">去找汪星人</a></li>

</ul>

<h3 id="miao">喵星人基地</h3>

</body>

</html>

二、跨頁(yè)面跳轉(zhuǎn)

①：設(shè)置錨點(diǎn)鏈接，在href中的路徑后面追加：#+錨點(diǎn)名，即可

如：<a href="萌寵集結(jié)號(hào).html#miao">跳轉(zhuǎn)到萌寵集結(jié)號(hào)頁(yè)面</a>

②：要跳轉(zhuǎn)到的頁(yè)面中要設(shè)置錨點(diǎn)，方法見(jiàn)一種的步驟②，兩個(gè)方法任選其一。

、錨點(diǎn)鏈接的概念

我們?cè)跒g覽一個(gè)網(wǎng)頁(yè)的時(shí)候，通常會(huì)遇到比較長(zhǎng)的網(wǎng)頁(yè)，一直向下拉滾動(dòng)條一直向下，而在最底部的位置通常會(huì)有一個(gè)一鍵返回到頂部

或者返回到哪里的按鈕，這個(gè)按鈕就是利用的 錨點(diǎn)鏈接 功能。

二、錨點(diǎn)鏈接的語(yǔ)法

就兩個(gè)值：第一個(gè)就是錨點(diǎn)下在哪里？第二個(gè)就是點(diǎn)在哪里？

<body>

<!-- 2、跳轉(zhuǎn)的目標(biāo)位置：點(diǎn)-->

<a id="test">這里是頂部</a>

<!-- 1、跳轉(zhuǎn)的按鈕：錨-->

<a href="#test">回到頂部</a>

</body>

三、錨點(diǎn)的用法實(shí)例

源代碼：↓

備注：如果手機(jī)上看格式錯(cuò)亂，建議粘貼到電腦版編輯器里觀看。

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：HTML編碼規(guī)范

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

神奇的html錨點(diǎn)，讓你的網(wǎng)頁(yè)在內(nèi)部自由的跳轉(zhuǎn)

、錨點(diǎn)鏈接的概念

二、錨點(diǎn)鏈接的語(yǔ)法

三、錨點(diǎn)的用法實(shí)例

您的項(xiàng)目需求