html 锚点

自己做过项目，没有用到锚点的时候，但是今天无意中看到，所以记录一下这个知识点吧~

锚点用到的情况是非常多的，举个栗子： 我们常见各个技术型官网API，组件介绍时就常用到；

最常用用法：

1 <div style="width:100%;height:1200px;background: #cccccc;">
2     <a href="#maodian1">锚点测试1</a><br>
3     <a href="#maodian2">锚点测试2</a>
4 </div>
5 <div id="maodian1" style="width:100%;height:800px;background:red;"></div>
6 <div id="maodian2" style="width:100%;height:900px;background:green;"></div>

a超链接的href属性对应值，与非a标签的id属性对应值一致，即可形成锚点！

点击a标签的“锚点测试1”，“锚点测试2” 会跳转到与之对应的id的div区域（实际为dom元素的上移或者下移，对应id的div会尽量靠近浏览器的顶部）。

 

也可以<a>设置为锚点跳转目标：

<a href="#miaodian">锚点测试</a>

<a name="miaodian"></a>

 

posted @ 2018-11-26 14:23  秋风2016  阅读(388)  评论(0)  编辑  收藏  举报