在網(wǎng)頁中經(jīng)常用到錨點,特別是在比較長的頁面中錨點的使用會增加用戶體驗,現(xiàn)在php中文網(wǎng)介紹html 錨點三種實現(xiàn)方法
1). 在同一頁面中
<a name="add"></a> 或者 <a id="add"></a> (ps:用id兼容性好些)
<a href="#add">跳轉(zhuǎn)到add</a>
2). 在不同頁面中,錨點定位在a.html中,從另外一個頁面的鏈接跳轉(zhuǎn)到這個錨點
<a href="a.html#add">跳轉(zhuǎn)到a.add</a>
3). 點擊鏈接觸發(fā)js事件,同時跳轉(zhuǎn)到錨點,有兩種處理方式:
第一種:
<a href="#add" onclick="add()">觸發(fā)add函數(shù)并跳轉(zhuǎn)到add錨點</a>
第二種:
<p id="pNode"></p>
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通過scrollIntoView實現(xiàn)錨點效果</a>
scrollIntoView()的用法
scrollIntoView是一個與頁面(容器)滾動相關的API(官方解釋),該API只有boolean類型的參數(shù)能得到良好的支持(firefox 36+都支持),所以在這里只討論參數(shù)Boolean類型的情況
調(diào)用方法為 element.scrollIntoView() 參數(shù)默認為true。
參數(shù)為true時調(diào)用該函數(shù),頁面(或容器)發(fā)生滾動,使element的頂部與視圖(容器)頂部對齊;
參數(shù)為false時,使element的底部與視圖(容器)底部對齊。
TIPS:頁面(容器)可滾動時才有用!

