html中锚点的基本使用

最新推荐文章于 2022-01-22 10:00:42 发布

abc33445

最新推荐文章于 2022-01-22 10:00:42 发布

阅读量205

点赞数

原文链接：http://www.cnblogs.com/huzhazha/p/7061077.html

版权

锚点

锚点的基本使用场景

当一个网页很长的时候，那么我们在翻阅这个网页的时候可能会有些不方便，比如我们已经翻阅到了底部之后想返回到顶部，那么只能拖动滚动条到顶部（或者刷新页面，但这个不是专业的做法），效果比较好的方法就是设置锚点来处理这个问题。

那么锚点如何设置呢？见如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#bottom" name="top">去底部</a>
    <div style="height: 5000px; width: 300px; background-color: #123"></div>
    <a href="#top" name="bottom">回到顶部</a>
</body>
</html>

这里就有两个锚点，一个名字叫做top，一个名字叫做bottom，其实a标签比较特殊，可以用name属性值来指定锚点的名称（当然也可以通过id值来指定锚点名称），其他标签只能通过id值来指定锚点名称，当id值为空的时候，默认锚点名称为#，即点击之后就是定位到本网页。

在以上代码中，锚点的使用可能不够合适，正确的做法是把锚点的position属性设置为fixed，
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #control {
            position: fixed;
            left: 310px;
            width: 100px;
            height: 65px;
            background-color: #ffa;
        }
    </style>

</head>
<body>
    <div id="control">
        <li><a href="#top">top</a></li>
        <li><a href="#mid">mid</a></li>
        <li><a href="#bottom">bottom</a></li>
    </div>
    <div id="top"></div>
    <div style="height: 1000px; width: 300px; background-color: yellow"></div>
    <div id="mid"></div>
    <div style="height: 1000px; width: 300px; background-color: red"></div>
    <div id="bottom"></div>
</body>
</html>

锚点的知识拓展

可以定位到本地其他html文件的一个锚点，也可以定位到外部网站的某个html文件的一个锚点（有ID属性的标签），代码示例如下：
01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="02.html#bottom">点击跳转到本地网页的一个锚点</a>
    <a href="http://www.sohu.com#god_1">点击跳转到外部网页的一个锚点</a>
</body>
</html>

在转到外部网站的界面的时候，这里选择了转到搜狐主页的一个锚点god_1，通过实验可以发现，右边滚动条确实不在最顶端，证明发生了定向。

02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#bottom" name="top">去底部</a>
    <div style="height: 5000px; width: 300px; background-color: #123"></div>
    <a href="#top" name="bottom">回到顶部</a>
</body>
</html>

转载于:https://www.cnblogs.com/huzhazha/p/7061077.html