1. 程式人生 > >a標籤有關用法以及錨點定位

a標籤有關用法以及錨點定位

一.頁面內的錨點定位;

錨點定位中,就算採用overflow:hidden將滾動條隱藏,但是它依然可以發生錨點定位,實現定點跳轉;

1.單向定位:

    錨定定位實在頁面必須要發生滾動的情況下,不滾動也能發生,效果不明顯;他的語法見下面程式碼:

  1. <a href="#2">錨點2</a>
  2. ....文字省略
  3. <h2><a name="2" id="2">錨點2</a></h2>

2.雙向定位:

也是在單頁面內進行定位,就是這處定位到文章的某一處,又可以從文章這一處回到原來的位置;見程式碼:

  1. <a href="#wo" name="huiqu"
    id="huiqu">3年</a>
  2. 文字省略....
  1. 文字省略....
  2. <a href="#huiqu" id="wo" name="wo">3年前的今天</a>
意思就是說從一處去,再從這一處來;

3.頁面跳轉定位看看是否能行,頁面跳轉也能精確的定位;

(1)單向定位:

 只要在html中a標籤中href屬性加一個另一個檔案的相對路徑就能完成;

  1. 在index.html檔案中
  2. 省略文字...
  3. <a href="./index2.html#3">錨點3</a>
  4. 省略文字...

  1. 在index2.html檔案中
  2. 文字省略
  3.  <a id="3" name="3"
    >
    3年前</a>
  4. 文字省略
(2)雙向定位(路由的雙向繫結):

其實只要在一個a標籤中加上相對的相互路徑;

  1. index.html檔案中
  2. 省略文字...
  3. <a href="./index2.html#3" id="goBack" name="goBack">錨點3</a>
  4. 省略文字...

  1. 在index2.html檔案中
  2. 省略文字...
  3.  <a href="./index.html#goBack" id="3" name="3">3年前</a>
  4. 省略文字...
它的優勢可以很快的定位到某一點的某一個字上,但是必須是在html檔案中才能發生跳轉,

在一些框架中,就不能很好的使用;如果需要使用,那也必須採用js相關技術定位;

但是在react,vue,angular等框架中,a標籤錨點定位,無法使用,使用會導致頁面無法載入,更甚至會報錯404;

如果要實現頁面路由跳轉定位,可以通過js程式碼:

	window.parent.scrollTo(0, 0)