锚点链接怎么做

网页内容过多时我们可以使用锚点链接来进行位置的跳转,通过锚点链接我们不但可以指向文档,还能指向页面里的特定段落,这样就会便于我们来浏览网页中的内容,那么,锚点链接怎么实现呢?本篇文章就来给大家介绍锚点链接实现方法

锚点链接

方法一:使用id来进行锚点定位

我们来看具体的示例

代码如下

<!DOCTYPE html>
<html>
<head>
	<Meta charset=utf-8>
	<title></title>
</head>
<body>
<a href=#string>跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a id=string>hello,I'm here!</a>
</body>
</html>

运行效果如下

锚点链接

当点击“跳转”时会跳转到“hello,I'm here!”,效果如下

锚点链接

跳转当前页面的“hello,I'm here!”。

方法二:使用name属性来实现锚点链接

来看具体的示例

代码如下

<!DOCTYPE html>
<html>
<head>
	<Meta charset=utf-8>
	<title></title>
</head>
<body>
<a href=#string>跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a name=string>hello,I'm here!</a>
</body>
</html>

也是当鼠标点击“跳转”时,会跳转当前页面的“hello,I'm here!”。

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些