大话前端

html锚点定位

2018-04-03  本文已影响4人  fenerchen

使用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

上一篇 下一篇

猜你喜欢

热点阅读