当前位置: 首页 > news >正文

HTML跳转锚点

跳转锚点适用于本页面和其他页面的任意标签的跳转以及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.点击弹窗锚点

在这里插入图片描述

http://www.lryc.cn/news/226752.html

相关文章:

  • 新能源汽车高压线束是如何快速连接到测试设备上进行电性能测试的
  • Azure 机器学习 - 使用受保护工作区时的网络流量流
  • 强化学习中蒙特卡罗方法
  • Pytorch从零开始实战09
  • Milvus Cloud ——Agent 的展望
  • EM@比例恒等式@分式恒等式
  • 使用米联客FPGA开发板进行光口开发时遇到的问题总结
  • 【chat】 1:Ubuntu 20.04.3 编译安装moduo master分支
  • C#基于inpoutx64读写ECRAM硬件信息
  • 图论13-最小生成树-Kruskal算法+Prim算法
  • 免费博客搭建笔记
  • 网络运维Day10
  • @Cacheable 注解的 @CacheManager 示例
  • springboot二维码示例
  • nacos做服务配置和服务器发现
  • KCC@广州与 TiDB 社区联手—广州开源盛宴
  • CSS3 分页、框大小、弹性盒子
  • GEE问题——GEE中循环的使用map()函数,以提取指定范围内的逐日的二氧化氮平均浓度为例
  • 短信验证码实现(阿里云)
  • 如何对element弹窗进行二次封装
  • 【微服务专题】手写模拟SpringBoot
  • 七个优秀微服务跟踪工具
  • redis 问题解决 1
  • odoo16前端框架源码阅读——启动、菜单、动作
  • C/C++(a/b)*c的值 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
  • CIFAR-100数据集的加载和预处理教程
  • C#,数值计算——函数计算,Eulsum的计算方法与源程序
  • ChatGLM3 langchain_demo 代码解析
  • asp.net学院网上报销系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
  • ElasticSearch知识点