当前位置:首页 > 编程笔记 > 正文
已解决

HTML跳转锚点

来自网友在路上 11018101提问 提问时间:2023-11-12 12:42:24阅读次数: 101

最佳答案 问答题库1018位专家为你答疑解惑

跳转锚点适用于本页面和其他页面的任意标签的跳转以及JavaScript的运行

使用方法即给标签加上独一无二的id属性,再使用a标签跳转
如果是其他页面的标签只需加上其他页面的路径,eg.href="其他页面的路径#zp1"

id属性的最好不要使用数字开头

 	<a href="#zp1" >看照片1</a><a href="#zp2" >看照片2</a><a href="#zp3" >看照片3</a><a href="#zp4" >看照片4</a><p id="zp1">照片1</p><img src="./image/test.jpg" alt="照片1"><p id="zp2">照片2</p><img src="./image/test.jpg" alt="照片2"><p id="zp3">照片3</p><img src="./image/test.jpg" alt="照片3"><p id="zp4">照片4</p><img src="./image/test.jpg" alt="照片4"><p>介绍完毕!</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:alert(123);">点我弹窗</a>

显示效果如下:

整体效果:

在这里插入图片描述

在这里插入图片描述

eg.

1.点击照片跳转锚点3

在这里插入图片描述

2.点击回到顶部锚点

在这里插入图片描述

3.点击刷新页面锚点(因为刷新以后会默认回到顶部所有也有回到顶部的作用)

在这里插入图片描述

4.点击弹窗锚点

在这里插入图片描述

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"HTML跳转锚点":http://eshow365.cn/6-38070-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!