CSDN-markdown 頁間跳轉(錨點鏈接)的實現

   錨點鏈接,也稱作“錨點”。通過點擊命名錨點,瀏覽器能夠快速重定向網頁特定的位置,跳轉到該錨點所定位置(比如快速到頁首、頁尾或者網頁中某處)。 本文舉例講解 CSDN-markdown 通過 id 屬性實現:

   頁內跳轉:例如,一個很長的頁面最下方有一個“返回頁首”的按鈕,就是一種最典型的頁內錨點鏈接;
   頁間跳轉:另外,測試發現 CSDN-markdown 支持頁面間跳轉,即錨點鏈接可指向非本頁面中的位置。

頁內跳轉


實現方法

  • Step 1:定義位置標記

  首先,要定義想讓錨點去指定的位置標記(即這行代碼:<div id="footer"></div>),其中“footer”只是自己設定的該位置名稱,可以隨意修改。

  • Step 2:設置錨點鏈接

  其次,將定義好的位置標記放到要跳轉到的地方。 然後把錨點鏈接(即#footer)用像插入網頁鏈接一樣方式放在任意地方,當點擊這個錨點鏈接(跳轉鏈接)時就會跳到位置標記所在的位置。

實現案例

<div id="Mark"></div>這句話定義了錨點所指定的位置標記,名字爲“Mark”.
[這句話是想要跳轉到Mark處的錨點鏈接,點擊即會跳轉](#Mark).

實現效果

這句話定義了錨點所指定的位置標記,名字爲“Mark”.
這句話是想要跳轉到Mark處的錨點鏈接,點擊即會跳轉.

頁間跳轉


實現方法
  方法類型頁內跳轉,先定義位置標記,再設置錨點鏈接。區別僅僅在於位置標記定義的書寫別的頁面文本中操作,錨點鏈接的書寫要添上要跳轉到的頁面的鏈接

實現案例

  • Step 1:定義位置標記

  這時位置標記<div id="Inter-Page"></div>寫在了博文【PGM】概率圖模型: Coursera課程資源分享和簡介中,位置名稱爲“Inter-Page”,在如下方截圖所示的位置處。


位置標記所在位置說明
截圖:位置標記所在位置說明

  • Step 2:設置錨點鏈接

  這時錨點鏈接的書寫要添上要跳轉到的頁面的鏈接,再加”/#位置標記名稱”,即本例中的”/#Inter-Page”. 由於上述博文地址爲 http://blog.csdn.net/thither_shore/article/details/5218575,故寫作

[現在點擊此鏈接,可實現頁間跳轉](http://blog.csdn.net/thither_shore/article/details/52185758/#Inter-Page)

實現效果

現在點擊此鏈接,可實現頁間跳轉

注:其實很多html標籤都可以用來定義位置標識,重點在於利用的是該標籤的“id”屬性

比如當我想定義名爲way1, way2和way3這三個位置標識時,用div,span或a均可.

<div id="way1"></div>
<span id="way2"></span>
<a id="way3"></a>
發佈了27 篇原創文章 · 獲贊 172 · 訪問量 30萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章