html页面a标签跳转到另一html页面固定位置(锚点)

主要分为两步

1,在原始页面中的a标签中加入要跳转页面的标记;
2,在要跳转的页面中加入标记。

例:在原始页面中(index.html)
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
  </head>
  <body>
    <h3>锚点测试</h3>
    <div>
      <a href="AnchorPoint.html#red">红</a>
      <a href="AnchorPoint.html#yellow">黄</a>
      <a href="AnchorPoint.html#blue">蓝</a>
    </div>
  </body>
</html>
注:设置锚点链接,在href中的路径后面追加:#+锚点名即可

在要跳转的页面中 (AnchorPoint.html)
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>AnchorPoint</title>
  </head>
  <body>
    <div>
      <a name="red"></a>
    <div style="border:solid;color:red;width:500px;height:500px">

    </div>

    <a name="yellow" ></a>
    <div style="border:solid;color:yellow;width:500px;height:500px">

    </div>

    <a name="blue" ></a>
    <div style="border:solid;color:blue;width:500px;height:500px">

      </div>
    </div>
  </body>
</html>
注:在此页面设置锚点 name="red"

 

posted @ 2019-05-05 10:18  CodeMagic  阅读(6171)  评论(0)    收藏  举报