錨點鏈接,也稱作“錨點”。通過點擊命名錨點,瀏覽器能夠快速重定向網頁特定的位置,跳轉到該錨點所定位置(比如快速到頁首、頁尾或者網頁中某處)。 本文舉例講解 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>