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.hqwc.cn/news/169016.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

体验前所未有的显示器管理体验:BetterDisplay Pro Mac

在现代的数字化时代&#xff0c;显示器是我们日常生活和工作中不可或缺的一部分。从笔记本电脑到台式机&#xff0c;从平板电脑到手机&#xff0c;几乎所有的电子设备都配备了显示器。然而&#xff0c;对于专业人士和从事设计行业的人来说&#xff0c;仅仅依靠系统自带的显示器…

SQL 聚合函数

前言 SQL中的聚合函数是对一组值执行计算&#xff0c;并返回单个值的函数。 常用的聚合函数有&#xff1a; 函数作用AVG&#xff08;&#xff09;求平均值MAX&#xff08;&#xff09;求最大值MIN&#xff08;&#xff09;求最小值SUM&#xff08;&#xff09;求和COUNT&…

MATLAB中plot函数用法

目录 语法 说明 向量和矩阵数据 表数据 其他选项 示例 创建线图 绘制多个线条 根据矩阵创建线图 指定线型 指定线型、颜色和标记 在特定的数据点显示标记 指定线宽、标记大小和标记颜色 添加标题和轴标签 绘制持续时间并指定刻度格式 基于表绘制坐标 在一个轴…

百度智能云正式上线Python SDK版本并全面开源!

文章目录 1. SDK的优势2. 千帆SDK&#xff1a;快速落地LLM应用3. 如何快速上手千帆SDK3.1 SDK快速启动3.2 SDK进阶指引3.3 通过Langchain接入千帆SDK 4. 开源社区 百度智能云千帆大模型平台再次升级&#xff01;在原有API基础上&#xff0c;百度智能云正式上线Python SDK&#…

Dubbo从入门到上天系列第五篇:Dubbo3与JDK17不兼容问题展示

文章目录 一&#xff1a;JDK 与 Dubbo版本对应问题说明 1&#xff1a;问题1 2&#xff1a;问题2 二&#xff1a;Spring与JDK版本对应关系 1&#xff1a;对应关系详图 2&#xff1a;JDK与Major对应关系图 大神链接&#xff1a;作者有幸结识技术大神孙哥为好友&#xff0c…

【算法】牛的旅行(图的直径,floyd算法求最短路)

题目 农民John的农场里有很多牧区&#xff0c;有的路径连接一些特定的牧区。 一片所有连通的牧区称为一个牧场。 但是就目前而言&#xff0c;你能看到至少有两个牧区不连通。 现在&#xff0c;John想在农场里添加一条路径&#xff08;注意&#xff0c;恰好一条&#xff09;。 一…

Git 进阶使用

一. Git图形化操作 1.1.什么是图形化管理工具 图形化管理工具是一种通过可视化界面来操作计算机系统或应用程序的软件工具。在软件开发中&#xff0c;它通常用于管理和操作版本控制系统&#xff08;如Git、SVN等&#xff09;以及代码开发环境&#xff08;如IDE&#xff09;。与…

【已解决】ModuleNotFoundError: No module named ‘sklearn‘

问题描述 Traceback (most recent call last): File "/home/visionx/nickle/temp/SimCLR/linear_evaluation.py", line 210, in <module> from sklearn.manifold import TSNE ModuleNotFoundError: No module named sklearn 解决办法 pip install numpy…

GEE:计算有效像素占比(统计有效像素数量、像素总数)

作者:CSDN @ _养乐多_ 在GEE中进行遥感数据处理的时候,经常会由于去云,导致影像出现空洞,只有部分像素可用,或者在进行特殊处理时,只对有效像素进行处理,但是我们不知道有效像素数量和占比,无法对结果做出准确的分析。这个时候就需要统计有效像素数量占比。 本文记录…

原型模式(创建型)

一、前言 原型模式是一种创建型设计模式&#xff0c;它允许在运行时通过克隆现有对象来创建新对象&#xff0c;而不是通过常规的构造函数创建。在原型模式中&#xff0c;一个原型对象可以克隆自身来创建新的对象&#xff0c;这个过程可以通过深度克隆或浅克隆来实现。简单说原型…

【PyQt】(自制类)处理鼠标点击逻辑

写了个自认为还算不错的类&#xff0c;用于简化mousePressEvent、mouseMoveEvent和mouseReleaseEvent中的鼠标信息。 功能有以下几点&#xff1a; 鼠标当前状态&#xff0c;包括鼠标左/中/右键和单击/双击/抬起鼠标防抖(仅超出一定程度时才判断鼠标发生了移动)&#xff0c;灵…

vue做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,

先看效果&#xff1a; 代码&#xff1a;主要部分我会红线画出来 css:部分&#xff1a; 源码&#xff1a; vue部分&#xff1a; <template><div class"song-lyric"><div><div class"type"><div class"right">&l…