一.頁(yè)面內(nèi)的錨點(diǎn)定位；

錨點(diǎn)定位中，就算采用overflow：hidden將滾動(dòng)條隱藏，但是它依然可以發(fā)生錨點(diǎn)定位，實(shí)現(xiàn)定點(diǎn)跳轉(zhuǎn)；

1.單向定位：

??? 錨定定位實(shí)在頁(yè)面必須要發(fā)生滾動(dòng)的情況下，不滾動(dòng)也能發(fā)生，效果不明顯；他的語(yǔ)法見下面代碼：

<a href="#2">錨點(diǎn)2</a>
....文本省略
<h2><a name="2" id="2">錨點(diǎn)2</a></h2>

2.雙向定位：

?

也是在單頁(yè)面內(nèi)進(jìn)行定位，就是這處定位到文章的某一處，又可以從文章這一處回到原來(lái)的位置；見代碼：

?

<a href="#wo" name="huiqu" id="huiqu">3年</a>
文本省略....
文本省略....
<a href="#huiqu" id="wo" name="wo">3年前的今天</a>

意思就是說(shuō)從一處去，再?gòu)倪@一處來(lái)；

?

3.頁(yè)面跳轉(zhuǎn)定位看看是否能行，頁(yè)面跳轉(zhuǎn)也能精確的定位；

（1）單向定位：

?只要在html中a標(biāo)簽中href屬性加一個(gè)另一個(gè)文件的相對(duì)路徑就能完成；

?

在index.html文件中
省略文本...
<a href="./index2.html#3">錨點(diǎn)3</a>
省略文本...
?

在index2.html文件中
文本省略
?<a id="3" name="3">3年前</a>
文本省略
（2）雙向定位(路由的雙向綁定):

?

其實(shí)只要在一個(gè)a標(biāo)簽中加上相對(duì)的相互路徑；

?

index.html文件中
省略文本...
<a href="./index2.html#3" id="goBack" name="goBack">錨點(diǎn)3</a>
省略文本...
?

在index2.html文件中
省略文本...
?<a href="./index.html#goBack" id="3" name="3">3年前</a>
省略文本...
它的優(yōu)勢(shì)可以很快的定位到某一點(diǎn)的某一個(gè)字上。

?

如果要實(shí)現(xiàn)頁(yè)面路由跳轉(zhuǎn)定位，可以通過(guò)js代碼：

window.parent.scrollTo(0, 0)
這是定位頂部，依然可以定位到某個(gè)某位值，但是要精確到某個(gè)字上就比較繁雜；接下來(lái)，我為大家介紹一個(gè)有關(guān)a標(biāo)簽的其他用法；

其實(shí)a標(biāo)簽有個(gè)target屬性；

_blank
瀏覽器總在一個(gè)新打開、未命名的窗口中載入目標(biāo)文檔。

_self
這個(gè)目標(biāo)的值對(duì)所有沒有指定目標(biāo)的 <a> 標(biāo)簽是默認(rèn)目標(biāo)，它使得目標(biāo)文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個(gè)目標(biāo)是多余且不必要的，除非和文檔標(biāo)題 <base> 標(biāo)簽中的 target 屬性一起使用。

_parent
這個(gè)目標(biāo)使得文檔載入父窗口或者包含來(lái)超鏈接引用的框架的框架集。如果這個(gè)引用是在窗口或者在頂級(jí)框架中，那么它與目標(biāo) _self 等效。

_top
這個(gè)目標(biāo)使得文檔載入包含這個(gè)超鏈接的窗口，用 _top 目標(biāo)將會(huì)清除所有被包含的框架并將文檔載入整個(gè)瀏覽器窗口。

即：

<a target='_blank'></a>
//另外一個(gè)窗口打開
當(dāng)然還有在css中的用法：ele：link/ele: visited /ele:active/ele: hover

我就不過(guò)多介紹這幾個(gè)了，特別提一下兩個(gè)偽類，ele:active和ele:hover，他們?cè)谄渌匾彩浅１挥玫膬蓚€(gè)偽類，除此之外，余下的就是a標(biāo)簽的獨(dú)有的偽類啦。

當(dāng)然還有很少用到但又常用到一些方法，通過(guò)a標(biāo)簽發(fā)送郵箱和打電話呀，都是有可能有道的，經(jīng)常會(huì)看到有些網(wǎng)站會(huì)有一些運(yùn)用。廢話不多講，見代碼吧：

<a href="mailto:郵箱地址"></a>

<a href='href:電話號(hào)碼'></a>
還可以通過(guò)a標(biāo)簽完成一些下載功能：圖片及一些文件都是可以的；

<a href="#" download='a.html' id="newP">我是到5html</a>
var np = document.getElementById('newP');
np.onclick = function(){

var blob = new Blob([JSON.stringify('3897498')], {type: "" });
np.href = URL.createObjectURL(blob);
URL.revokeObjectURL(blob);
}

---------------------
作者：Scott_less
來(lái)源：CSDN
原文：https://blog.csdn.net/qq_30101879/article/details/78511227
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！

轉(zhuǎn)載于:https://www.cnblogs.com/klb561/p/9900534.html

總結(jié)

以上是生活随笔為你收集整理的标签有关用法以及锚点定位；的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。