html 錨點三種實現(xiàn)方法

在網(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:頁面(容器)可滾動時才有用!

document.getElementById("view").scrollIntoView();

document.getElementById("view").scrollIntoView(false);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,513評論 0 21
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,135評論 1 92
  • 學習 jQuery-fullPage.js 插件已經(jīng)兩天,參照網(wǎng)上的案例仿造了一個“魅族Note2官網(wǎng)”網(wǎng)頁,中間...
    seporga閱讀 6,604評論 2 11
  • 我喜歡錢 錢能買到想要的東西 錢能滿足我的欲望 錢能讓我過得好一點 我討厭錢 錢是萬惡之源 所有的糾紛 無非是一個...
    逸心格格閱讀 379評論 6 0
  • “壹加壹計劃”正式開始了! “弟子規(guī),圣人訓,首孝悌,次謹信。泛愛眾,則親民,有余力,則學文?!?由此繁衍出“行有...
    壹加壹計劃閱讀 1,328評論 0 0

友情鏈接更多精彩內(nèi)容