美文网首页H5C3
html 锚点三种实现方法

html 锚点三种实现方法

作者: 大檬煮WesleyQ | 来源:发表于2018-12-21 17:22 被阅读11次

    在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验,现在php中文网介绍html 锚点三种实现方法
    1). 在同一页面中
    <a name="add"></a> 或者 <a id="add"></a> (ps:用id兼容性好些)
    <a href="#add">跳转到add</a>
    2). 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点
    <a href="a.html#add">跳转到a.add</a>
    3). 点击链接触发js事件,同时跳转到锚点,有两种处理方式:
    第一种:
    <a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>
    第二种:
    <p id="pNode"></p>
    <a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

    scrollIntoView()的用法
    scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况
    调用方法为 element.scrollIntoView() 参数默认为true。

    参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

    参数为false时,使element的底部与视图(容器)底部对齐。

    TIPS:页面(容器)可滚动时才有用!

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

    相关文章

      网友评论

        本文标题:html 锚点三种实现方法

        本文链接:https://www.haomeiwen.com/subject/bdrvkqtx.html