设置锚点的三种方法 - 简书
设置锚点的三种方法
最网页中经常会用到锚点来定位，这里就和大家说说我知道的三种锚点的使用目前我就知道三种，更多的方法暂时没去研究，有的话大家帮忙补充。现在和大家说的主要是最常用最简单的方法。
1.使用 id 定位
先和大家说说最常用的 ID定位 ，这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位
使用说明：设置一个锚点 id,然后用 href 属性点位到该锚点id,具体实例代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
margin-bottom: 4
width: 100
height: 20
background: #
text-align:
&a href="#a"&定位到A&/a&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li id="a"&=>A&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&&li&&/li&
由于代码有点长，所以下面的代码基于上面的代码进行简略。大家可以电脑上自己试试。
2.使用 name 定位
第二种定位的方式就有所限制了，使用 name 定位只用于 &a& 标签,其他的标签就不管用了。
&body& &li& &a href="#a"&定位到A&/a& &/li&
&li& &a name="a"&定位到A&/a& &/li&
3.使用 js 定位
第三种方式的使用就如下面的，不过我不是很喜欢这种用法。
&body& &li onclick="javascript:document.getElementById('here').scrollIntoView()"& &/li&
&li& &a name="a"&定位到A&/a& &/li&
对于上面的三种用法，大家不一定都用的到，用到的也许就只有第一种。自然我这边也是推荐大家用第一种。
在运行代码的时候，大家会发现锚点都是用跳的，完全没有过渡的效果。不过没关系，这也是我写这篇文章奠定基础的原因。我会在我接下来的文章里和大家介绍锚点跳转时屏幕滚动的效果。
谢谢大家查阅我的文章，希望能帮到你，^_^
好记性不如烂笔头，学一点记一点，菜鸟程序员成长记！}