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

html中使用JQ自定义锚点偏移量

问题:一般情况下使用href跳转达到效果。如果页面中头部固定住了,点击瞄点的时候自动是最上面,头部会给它覆盖掉一部分,所以要在点击之后额外再加头部高度

<a href="#aa">Technical Documents</a><div id="aa">aaaaaaaaaaa</div>

js 

// 当点击瞄点时执行滚动动作
$('a[href="#aa"]').on('click', function(e) {e.preventDefault(); // 阻止默认行为var targetPosition = $('#aa').offset().top; // 获取瞄点位置$('html, body').animate({scrollTop: targetPosition + 100 // 滚动到瞄点位置再额外往下滚动100px}, 800); // 滚动持续时间
});

如果有多个的话,封装js

// 当点击瞄点时执行滚动动作
function scrollToAnchor(anchor, offset) {$('a[href="' + anchor + '"]').on('click', function(e) {e.preventDefault(); // 阻止默认行为var targetPosition = $(anchor).offset().top; // 获取瞄点位置$('html, body').animate({scrollTop: targetPosition - offset // 滚动到瞄点位置再额外往下滚动指定的偏移量}, 800); // 滚动持续时间});
}// 使用封装的函数
scrollToAnchor('#aa', 200);

相关文章:

html中使用JQ自定义锚点偏移量

问题&#xff1a;一般情况下使用href跳转达到效果。如果页面中头部固定住了&#xff0c;点击瞄点的时候自动是最上面&#xff0c;头部会给它覆盖掉一部分&#xff0c;所以要在点击之后额外再加头部高度 <a href"#aa">Technical Documents</a><div id&…...

032、数据增广*

之——泛化性提升 杂谈 深度学习的数据增强&#xff08;Data Augmentation&#xff09;是一种技术&#xff0c;用于通过对原始数据进行多样性的变换和扩充&#xff0c;以增加训练数据的多样性&#xff0c;提高模型的泛化能力。这有助于减轻过拟合问题&#xff0c;提高深度学习模…...

力扣最热一百题——盛水最多的容器

终于又来了。我的算法记录的文章已经很久没有更新了。为什么呢&#xff1f; 这段时间都在更新有关python的文章&#xff0c;有对python感兴趣的朋友可以在主页找到。 但是这也并不是主要的原因 在10月5号我发布了我的第一篇博客&#xff0c;大家也可以看见我的每一篇算法博客…...

备份扫描工具 god_bak

Part1 前言 不想写东西&#xff0c;或者说换种说法 有些东西还没写完&#xff0c;有些系列也还没整完。就放一个昨天摸鱼写的东西。 如图&#xff0c;每个系列都还是会按照自己的风格来写&#xff0c;代码审计实战等都会结合自己挖掘或审计过的案例进行结合知识点的风格去写&…...

软考 系统架构设计师系列知识点之数字孪生体(2)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之数字孪生体&#xff08;1&#xff09; 所属章节&#xff1a; 第11章. 未来信息综合技术 第5节. 数字孪生体技术概述 2. 数字孪生体的定义 AFRL&#xff08;Air Force Research Laboratory&#xff0c;美国空军研究实…...

CSS实现文本左右对齐

因为文本里面有中午符号&#xff0c;英文&#xff0c;英文符号等&#xff0c;导致设置宽度以后右侧凌乱&#xff0c;可以通过以下代码设置样式&#xff0c;让文本工整对齐。 让我们看一下设置前和设置后的对比图片&#xff1a; 效果图如下&#xff1a;&#xff08;左边是设置…...

利用exec命令进入docker容器时的报错问题

进入Docker 容器 docker exec [CONTAINER ID] bin/bash报错问题 一、详细报错信息 执行docker exec -it [containerId] /bin/bash报错&#xff1a; OCI runtime exec failed: exec failed: unable to start container process: exec: "/bin/bash": stat /bin/ba…...

Java 与C++ 语言的一些区别

Java 与C 语言的一些区别 前言不同之外 前言 之前用C、C 的多&#xff0c;目前开始学习和接触 Java &#xff0c;拿Java和C 做一个对比&#xff0c;帮助快速掌握Java的开发。 不同之外 数据类型的差别&#xff1a; java中 byte 类型类似于c/c 中的char类型 boolean 与C 的bo…...

npm ERR! network ‘proxy‘ config is set properly. See: ‘npm help config解决方法

这个错误提示通常表示在使用 npm 安装包时出现了网络连接问题。具体来说&#xff0c;可能是由于以下原因之一&#xff1a; 你的网络连接不稳定或者被防火墙拦截了。你的计算机设置了代理&#xff0c;但是 npm 没有正确配置代理。npm 的配置文件中的 registry 配置不正确&#…...

An Empirical Study of Instruction-tuning Large Language Models in Chinese

本文是LLM系列文章&#xff0c;针对《An Empirical Study of Instruction-tuning Large Language Models in Chinese》的翻译。 汉语大语言模型指令调整的实证研究 摘要1 引言2 指令调整三元组3 其他重要因素4 迈向更好的中文LLM5 结论局限性 摘要 ChatGPT的成功验证了大型语…...

[MICROSAR Adaptive] --- 开发环境准备

Ubuntu 20.04/22.04版本默认的cmake版本不超过3.19,gcc/g++为9.x版本 而ap开发要求cmake版本大于3.19,gcc/g++版本为gcc-7 1 安装高版本cmake cmake源码下载路径 https://cmake.org/files/tar zxvf cmake-3.19.2.tar.gz cd cmake-3.19.2 ./bootstrap --prefix=/usr/local …...

Yolov5 batch 推理

前言 想要就有了 代码 import shutil import time import traceback import torchimport os import cv2 class PeopleDetect(object):def __init__(self, repo_or_dir, weight_path, confidence) -> None:self.model torch.hub.load(repo_or_dir, "custom", p…...

【ARFoundation学习笔记】ARFoundation基础(下)

写在前面的话 本系列笔记旨在记录作者在学习Unity中的AR开发过程中需要记录的问题和知识点。难免出现纰漏&#xff0c;更多详细内容请阅读原文。 文章目录 TrackablesTrackableManager可跟踪对象事件管理可跟踪对象 Session管理 Trackables 在AR Foundation中&#xff0c;平面…...

《UML和模式应用(原书第3版)》2024新修订译本部分截图

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 机械工业出版社即将在2024春节前后推出《UML和模式应用&#xff08;原书第3版&#xff09;》的典藏版。 受出版社委托&#xff0c;UMLChina审校了原中译本并做了一些修订。同比来说&a…...

JSP 学生成绩查询管理系统eclipse开发sql数据库serlvet框架bs模式java编程MVC结构

一、源码特点 JSP 学生成绩查询管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;比较流行的servlet框架系统具有完整的源代码和数据库&#xff0c;eclipse开发系统主要采用B/S模式 开发。 java 学生成绩查询管理系统 代码下载链接…...

技术分享 | app自动化测试(Android)-- 属性获取与断言

断言是 UI 自动化测试的三要素之一&#xff0c;是 UI 自动化不可或缺的部分。在使用定位器定位到元素后&#xff0c;通过脚本进行业务操作的交互&#xff0c;想要验证交互过程中的正确性就需要用到断言。 常规的UI自动化断言 分析正确的输出结果&#xff0c;常规的断言一般包…...

flutter实现上拉到底部加载更多数据

实现上拉加载数据&#xff0c;效果如下&#xff1a; flutter滚动列表加载数据 使用的库主要是infinite_scroll_pagination , 安装请查看官网 接口用的是https://reqres.in/提供的接口 请求接口用到的库是dio 下面主要是介绍如何使用infinite_scroll_pagination实现上拉加载…...

UE4 Niagara Module Script 初次使用笔记

这里可以创建一个Niagara模块脚本 创建出来长这样 点击号&#xff0c;输出staticmesh&#xff0c;点击它 这样就可以拿到对应的一些模型信息 这里的RandomnTriCoord是模型的坐标信息 根据坐标信息拿到位置信息 最后的Position也是通过Map Set的号&#xff0c;选择Particles的P…...

【Spring Boot 源码学习】JedisConnectionConfiguration 详解

Spring Boot 源码学习系列 JedisConnectionConfiguration 详解 引言往期内容主要内容1. RedisConnectionFactory1.1 单机连接1.2 集群连接1.3 哨兵连接 2. JedisConnectionConfiguration2.1 RedisConnectionConfiguration2.2 导入自动配置2.3 相关注解介绍2.4 redisConnectionF…...

联想服务器-HTTP boot安装Linux系统

HTTP boot与传统PXE的主要差异 HTTP不再需要使用UDP协议的tftp服务&#xff08;连接不可靠、不支持大文件&#xff09;了&#xff0c;只需要dhcp 和http 两个服务即可&#xff0c;支持较稳定的大文件传输。 实验环境 ThinkSystem服务器SR650V2 SR660V2 通过HTTP boot安装Cen…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...