HTMLl中的锚点

最新推荐文章于 2024-10-18 16:09:23 发布

俊墨客

最新推荐文章于 2024-10-18 16:09:23 发布

阅读量381

点赞数

分类专栏：前端文章标签：描点跳转

本文链接：https://blog.csdn.net/tgvincent/article/details/102667258

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、页面内跳转的锚点设置

页面内的跳转需要两步：

方法一：

1、设置一个锚点链接。注意：href属性的属性值最前面要加#

<a href="#miaodian1">点击跳转</a>

2、在页面中需要的位置设置锚点。注意：a标签中要写一个name属性，属性值要与上面的的href的属性值一样，不加#号。标签中按需填写必要的文字，一般不写内容

/*点击第1步设置的<a>标签就会跳到本标签这个页面位置*/
<a name="miaodian1"></a>

方法二：

1、同方法一的1

<a href="#miaodian2">点击跳转</a>

2、设置锚点的位置；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#号。

 <h3 id="miaodian2">跳转到这里</h3>

方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点案例</title>
</head>
<body>
	<a href="#bottom" name="top">去底部</a>
	<a href="#miaodian1">跳转描点一</a>
	<a href="#miaodian2">跳转描点二</a>
	
	<div style="height: 5000px; width: 300px; background-color: #123"></div>
	
	<a name="miaodian1">描点一</a>
	<h3 id="miaodian2">描点二</h3>
	<a href="#top" name="bottom">回到顶部</a>
</body>
</html>

二、跨页面跳转

1、设置锚点链接，在href中的路径后面追加：#+锚点名，即可

<a href="b.html#other_page">跳转另一个页面</a>

2、要跳转到的页面中要设置锚点，方法见第一种方法的步骤2，两个方法任选其一。

 <input type="text">
 <div style="height: 5000px; width: 300px; background-color: #123"></div>
 <!--描点：其他页面通过点击直接跳到本页面本描点位置-->
 <a name="other_page">我在这里</a>

案例：
文件： a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="b.html#other_page">跳转到另一个页面</a>
</body>
</html>

文件： b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <div style="height: 5000px; width: 300px; background-color: #123"></div>
    <!--描点：其他页面通过点击直接跳到本页面本描点位置-->
    <a name="other_page">我在这里</a>
</body>
</html>