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);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134808.shtml

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

相关文章

批量迁移redis实例的key

我们知道migrate 命令可以迁移redis的多个key&#xff0c;但是如果redis的key有非常多&#xff0c;那用起来就很不方便了。 所以下面分享一个脚本来实现批量key的迁移&#xff0c;主要使用的命令为dump和restore 脚本如下&#xff1a; #!/bin/bash redis-cli -h host1 -p 63…

浅谈开源策略的实例:CGAL计算几何库

免责声明&#xff1a;本博客旨在分享我对开源策略的理解和体会&#xff0c;不代表任何组织或机构的立场或观点&#xff0c;也不构成任何商业或投资的建议或担保。本博客的内容可能存在错误或遗漏&#xff0c;也可能随着时间的推移而变得过时或不适用。请在使用或依赖本博客的内…

吴恩达《机器学习》6-1->6-3:分类问题、假设陈述、决策界限

一、什么是分类问题&#xff1f; 在分类问题中&#xff0c;我们试图预测的变量&#x1d466;是离散的值&#xff0c;通常表示某种类别或标签。这些类别可以是二元的&#xff0c;也可以是多元的。分类问题的示例包括&#xff1a; 判断一封电子邮件是否是垃圾邮件&#xff08;二…

Redis 多机方案

Redis 多机方案 Redis主从复制 Redis服务器角色可以分为主服务器和从服务器&#xff0c; 从服务器复制主服务。通过在指定服务器上执行SLAVEOF可以将服务器设置为目标服务器的从服务器&#xff0c; 目标服务器成为主服务器。 SLAVEOF 127.0.0.1 6379 同步实现 同步包括SLAV…

设计模式简要介绍

设计模式有很多&#xff0c;较为重要的如下 静态和单例模式 单例模式的本质就是类成员中有一个对象实例 public class Animal{public static string Title "Animal" // 类成员public string Name; // 对象成员public const float Pi 3.14f; // 类成员public rea…

C语言—窄字符或宽字符

#include<iostream> #include<Windows.h> #include<tchar.h>int main() {TCHAR destination[100];lstrcpy(destination, __T("你好"));_tprintf(__T("Copied string: %s\n"), destination); }/*在C/C中&#xff0c;__T(x) 格式通常用于实…

【系统集成项目管理工程师】——3.管理

主要掌握输入&#xff0c;输出内容先看他的过程域本身&#xff0c;过程域是什么输出就是什么 上一个过程域的输出是下一个过程域的输入 十大管理1432都有计划过程组&#xff0c;通常规划为首&#xff0c;控制为尾 规划阶段的万能输出是各子计划&#xff0c;即项目管理计划的…

【第2章 Node.js基础】2.1 JavaScript基本语法

文章目录 学习目标JavaScript版本与JavaScript运行环境JavaScript版本JavaScript运行环境 JavaScript语句与注释语句语句块注释 变量变量的命名变量的声明与赋值变量提升变量泄露全局作用域和函数作用域块级作用域与let关键字使用const关键字声明只读常量注意 数据类型数值&…

引用类型;强引用;软引用;弱引用和虚引用

概述 平时在编写代码的时候内存都是由jvm管理&#xff0c;对象的回收也是jvm在管理&#xff1b; 但是有些时候jvm无法回收对象&#xff0c;最后就会抛出oom异常. 那么那些回收不了的对象肯定有区别于能回收的对象&#xff1b; 先上一波引用类型介绍 强引用 比如平常我们直…

2023-11-06 monetdb-事务-insert-delta缓存-分析

摘要: monetdb在事务处理时, 会将数据写入delta缓存中, 然后在commit时将数据写入wal文件, 随后由控制器决定何时将wal中的数据真正的写入BAT列文件中. 本文从delta缓存入手, 分析monetdb在事务处理中的细节. SQL: DML: create table t1 (a int); 事务DDL: START TRANSACTI…

数据结构-Prim算法构造无向图的最小生成树

引子&#xff1a; 无向图如果是一个网&#xff0c;那么它的所有的生成树中必有一颗生成树的边的权值之和是最小的&#xff0c;我们称 这颗权值和最小的树为&#xff1a;“最小生成树”&#xff08;MST&#xff09;。 其中&#xff0c;一棵树的代价就是树中所有权值之和。 而…

外呼系统需要关注哪些功能?okcc呼叫中心ai智能语音

场景一&#xff1a; 当点击呼叫、一键拨号、预览外呼发起时&#xff0c;座席人员当前绑定的外呼设备&#xff1a;可能是手机、固话、软电话、WebRTC软电话、SIP话机等&#xff0c;首先振铃&#xff0c;同时外呼系统自动弹出外呼弹屏&#xff0c;展示被叫号码的详细信息&#x…

封装localstorage为对象 js

export const LocalStorageManager {recordKey: "Record",// 获取本地存储中的值get(key) {try {const value localStorage.getItem(key);if (value null || value undefined || value "") {return null;}return JSON.parse(localStorage.getItem(key…

Jest和Mocha两者之间有哪些区别?

什么是单元测试&#xff1f; 所谓单元测试&#xff0c;是对软件中单个功能组件进行测试的一种软件测试方式&#xff0c;其目的是确保代码中的每一个基本单元都能正常运行。因此&#xff0c;开发人员在应用程序开发的整个过程&#xff08;即代码编写过程&#xff09;中都需要进…

云原生周刊:Gateway API 1.0.0 发布 | 2023.11.6

开源项目推荐 Kueue Kueue 是一套用于作业队列的 API 和控制器。它是作业级管理器&#xff0c;可决定何时允许作业启动&#xff08;如创建 pod&#xff09;&#xff0c;何时停止作业&#xff08;如删除活动 pod&#xff09;。 Reloader 一个 Kubernetes 控制器&#xff0c;…

阿里云服务器登录、安装MySql、配置Python、GO环境

1、刚购买的云服务如何登录 刚购买的ECS没有默认密码&#xff0c;需要先设置一下登录的密码。选中实例&#xff0c;右上角的全部操作-->重置实例密码 如果想通过SSH登录&#xff0c;则一定要勾选开启 修改之后ssh root你机器的ip&#xff0c;输入密码就可以愉快的开始你的操…

如何安装Wnmp并结合内网穿透实现外网访问内网Wnmp服务

文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 WNMP是Windows系统下的绿色NginxMysqlPHP环境集成套件包&#xff0c;安装完成后即可得到一个Nginx MyS…

冥想第九百七十天

1.充实的一天&#xff0c;今天的天气还好&#xff0c;准备下班后去跑步&#xff0c;本来是明天要跑的&#xff0c;因为明天有课&#xff0c;所以今天跑&#xff0c;不耽误事。 2.全力以赴的一天&#xff0c;感谢父母&#xff0c;感谢朋友&#xff0c;感谢家人&#xff0c;感谢不…

TSINGSEE智能分析网关V4车辆结构化数据检测算法及车辆布控

车辆结构化视频AI检测技术&#xff0c;可通过AI识别对视频图像中划定区域内的出现的车辆进行检测、抓拍和识别&#xff0c;系统通过视频采集设备获取车辆特征信息&#xff0c;经过预处理之后&#xff0c;接入AI识别算法并与车辆底库进行对比&#xff0c;快速识别车辆身份和属性…

架构漫谈 - 如何设计高性能、高可用、高扩展架构

文章目录 一、如何设计高扩展架构架构设计复杂度模型可扩展复杂度模型"拆分"复杂度分析和设计"封装"复杂度分析和设计(1)规则引擎:美团MazeGO规则引擎(2)微内核:OSGI微内核(3)抽象层:Linux VFS抽象层(4)设计模式二、设计高性能架构单机高性能集…