html中的锚点笔记

最新推荐文章于 2022-04-20 16:33:47 发布

tpanhh

最新推荐文章于 2022-04-20 16:33:47 发布

阅读量317

点赞数

分类专栏： html 文章标签： html-锚点

本文链接：https://blog.csdn.net/ptb906790214/article/details/50757887

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先上例子
先建一个anchor.html的文件
代码如下：

<meta charset="utf-8">
<html>
    <head>
        <title>Test Anchor</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            a{
                font-size: 20px;
                font-weight: bold;
            }
            .anchor{
                width: 100%;
                height: auto;
                border: 1px solid black;
            }
            #hash1{
                width: 100%;
                height: 1000px;
                background-color: blue;
            }
            #hash2{
                width: 100%;
                height: 1000px;
                background-color: red;
            }
            #hash5{
                width: 100%;
                height: 1000px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="anchor">
            <a href="#hash2">1.测试使用id跳转到红色的区域(起作用)</a><br/>
            <a href="#hash3">2.测试使用name跳转到红色的区域(不起作用)</a><br/>
            <a href="#hash4">3.测试使用name跳转到黄色的区域(起作用)</a><br/>
            <a href="#hash5" onclick="javascript:document.getElementById('hash5').scrollIntoView()">4.测试使用js跳转到测试锚点(起作用)</a><br/>
            <a href="./other.html#hash6">5.测试使用name异页面跳转到测试锚点(起作用)</a><br/>
            <a href="./other.html#hash7">6.测试使用id异页面跳转到红色的区域(起作用)</a><br/>
        </div>
        <div id="hash1">    
        </div>
        <div id="hash2" name="hash3">   
        </div>
        <a href="#" name="hash4">测试锚点</a>
        <div id="hash5"></div>
    </body>
</html>

再在同一文件夹下建立一个other.html
代码如下：

<meta charset="utf-8">
<html>
    <head>
        <style type="text/css">
           *{
                margin: 0px;
                padding: 0px;
            }
            #d1{
                width: 100%;
                height: 1000px;
                background-color:#cccccc; 
            }
            #hash7{
                width: 100%;
                height: 1000px;
                background-color:red; 
            }
        </style>
    </head>
    <body>
        <div id="d1"></div>
        <a href="#" name="hash6">测试锚点</a>
        <div id="hash7"></div>
    </body>
</html>

分别有6种情况的测试结果：

1.使用id进行跳转

使用id属性实现锚点的跳转，在任何的html标签上都可以实现，无论是<div>标签还是<a>标签

2.在`<div>`使用name属性进行跳转

在<div>上使用name属性是不能实现跳转的，使用name属性实现跳转只能是在<a>标签中

3..在`<a>`使用name属性进行跳转

因为在<a>标签上使用name属性可以实现跳转，那么这个链接的跳转功能是可以实现的

4.使用javascript进行跳转

在同一个页面实现锚点的相同效果也可以使用javascript实现，可以使用scrollIntoView()方法，该方法的作用是使对象滚动到可见范围内

5.使用id进行异页面的跳转

与在同页面中一样，使用id属性在任何html标签上可以实现跳转

6.使用name进行异页面的跳转

与在同页面中一样，使用name属性之可以再<a>标签上实现跳转

另外因为在anchor页面不能获取other页面的dom节点，所以异页面的类锚点跳转不可以使用javascript实现

以上是个人总结，有误之处，不吝指摘，共同学习

tpanhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中的锚点笔记

先上例子先建一个anchor.html的文件代码如下：<meta charset="utf-8"><html> <head> <title>Test Anchor</title> <style type="text/css"> *{ margin: 0px; pa
复制链接

扫一扫