搜索
您的当前位置:首页正文

设置锚点的三种方法

来源:二三娱乐

最网页中经常会用到锚点来定位,这里就和大家说说我知道的三种锚点的使用目前我就知道三种,更多的方法暂时没去研究,有的话大家帮忙补充。现在和大家说的主要是最常用最简单的方法。


1.使用 id 定位

先和大家说说最常用的 ID定位 ,这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位

使用说明:设置一个锚点 id,然后用 href 属性点位到该锚点id,具体实例代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <style type="text/css">
            li{
                display: block;
                margin-bottom: 4px;
                width: 100px;
                height: 20px;
                background: #eee;
                text-align: center;
            }
        </style>
    <body>
        <li>
            <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>
        <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>
    </body>

</html>
由于代码有点长,所以下面的代码基于上面的代码进行简略。大家可以电脑上自己试试。

2.使用 name 定位

第二种定位的方式就有所限制了,使用 name 定位只用于 <a> 标签,其他的标签就不管用了。

... ...
<body> <li> <a href="#a">定位到A</a> </li>
... ...
<li> <a name="a">定位到A</a> </li>
... ...
</body>

3.使用 js 定位

第三种方式的使用就如下面的,不过我不是很喜欢这种用法。

... ...
<body> <li onclick="javascript:document.getElementById('here').scrollIntoView()"> </li>
... ...
<li> <a name="a">定位到A</a> </li>
... ...
</body>

对于上面的三种用法,大家不一定都用的到,用到的也许就只有第一种。自然我这边也是推荐大家用第一种。

谢谢大家查阅我的文章,希望能帮到你,^_^
Top