html锚点定位

作者: fenerchen | 来源:发表于2018-04-03 10:54 被阅读4次

    使用id定位

    a标签的href属性设置成要定位的元素的id

     <a href="#5">a链接,使用href=“#要定位的id”来定位</a>
           <div id="1">1</div>
           <div id="2">2</div>
           <div id="3">3</div>
           <div id="4">4</div>
           <div id="5">5</div>
           <div id='6'>6</div>
           <a name="name">a标签</a>
    

    点击后div6就会出现在视野中。

    使用name定位

    此方法只适用于a标签之间,a链接使用href=“#要定位的name”来定位

     <a href="#n">a链接使用href=“#要定位的name”来定位,此方法只能定位a标签</a>
           <div id="1">1</div>
           <div id="2">2</div>
           <div id="3">3</div>
           <div id="4">4</div>
           <div id="5">5</div>
           <div id='6'>6</div>
           <a name="n">a标签</a>
    

    点击后内容是'a标签'的就会出现在视野中。

    js

    使用元素的方法scrollIntoView()

    <span onclick="javasctipt:document.getElementById('6').scrollIntoView()">使用js来定位</span>
          
           <div id="1">1</div>
           <div id="2">2</div>
           <div id="3">3</div>
           <div id="4">4</div>
           <div id="5">5</div>
           <div id='6'>6</div>
           <a name="n">a标签</a>
    

    点击后div6就会出现在视野中。

    注意:可以从一个页面链接到另一个页面的锚记位置<a href="maodian2.html#other_page" target="_blank">另一个页面传送门</a>maodian2.html是另一个页面,l#other_page是另一个页面的元素id

    相关文章

      网友评论

        本文标题:html锚点定位

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