直接加载页面到锚标记

2024-04-28

当我加载 URL 中带有哈希标记的页面时,页面会加载,然后跳转到锚标记。有没有什么方法可以防止这种“跳转”,要么直接将页面加载到锚标记,要么至少使滚动平滑?

我在 Chrome 和 Firefox 中看到这个问题,但在 IE 中没有。


如果你仍然遇到跳跃问题,你可以使用 jQuery 来解决:

//Use a RegEx pattern to search for an id, if present
var pattern = new RegExp('\#(.*)');
var id = pattern.exec(window.location)[0].replace('#','');
//Prevent the browser's default behavior of jumping to the id
document.location = '#';
//When the page finishes loading, smoothly scroll to the specified content
$(document).ready(function() {
    if(id != "") {
        $('html,body').animate({
            scrollTop: $('#' + id).offset().top,
        }, 650);
    }
});

请注意,这只会在每次页面加载时起作用一次。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

直接加载页面到锚标记 的相关文章

  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt
  • 无法使用 Jade 模板包含相对路径文件

    当我尝试将文件包含在同一文件夹中时 收到以下错误 the filename option is required to use include with relative paths 有两个文件 索引 jade 项目列表 jade cont
  • 在 d3 中应用转换时出现错误

    我正在尝试对我在 d3 中设计的条形图应用一些过渡效果 这是我的代码 svg selectAll bar data data enter append g attr class bar append rect attr rx barRadi
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Bootstrap 3 水平滚动行网站设计

    我正在尝试使用 bootstrap 3 制作水平滚动网页 This http fiddle jshell net ravimallya 7kCTD 2 show 是我到目前为止所尝试过的 media min width 768px cont
  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • 检索受“rowspan”影响的行的列索引的最有效方法是什么?

    考虑下表 table thead tr th th th A th th B th th C th tr thead tbody tr th 1 th td Apples td td Oranges td td Pears td tr tb
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • 2 个 SVG 路径的交集

    我需要检查两个 SVG Path 元素是否相交 检查边界框与 getBBox 太不准确了 我目前正在做的是迭代两条路径 getTotalLength 然后检查是否有两个点 getPointAtLength 是平等的 下面是一个片段 但正如您
  • 为什么 Firefox 3.6 改变了 jQuery 和 CSS 属性?

    为什么 Firefox 3 6 改变了 jQuery 和 CSS 属性 好吧 更具体一点 我有一个交叉淡入淡出插件 可以在放置在彼此之上的两个图像之间创建发光效果 该函数 如下所示 将使顶部图像在悬停时在 200 毫秒内转换为不透明度 0
  • 如何在没有 jQuery 或延迟加载的情况下推迟背景图像

    根据帕特里克 塞克斯顿tutorial https varvy com pagespeed defer images html 我想以与这里相同的方式推迟背景图像img img src data image png base64 R0lGO
  • 使标签充当输入按钮

    我怎样才能做一个 a href http test com tag test Test a 就像表单按钮一样 通过充当表单按钮 我的意思是 当单击链接执行操作时method get 或 post 以便能够通过 get 或 post 捕获它
  • 使用 jQuery 获取 JSON Facebook Graph API 用户信息

    我正在尝试使用图形 API 来获取有关用户的一些基本信息 无需用户授权 只需获取公共详细信息 我正在尝试使用 jQuery 和 getJSON 来获取数据并解析它 但我很难弄清楚如何访问我想要的键值对 我想要有类似的东西 var fburl
  • 鼠标输入时反应显示按钮

    我有一个反应组件 它包含如下方法 mouseEnter console log this is mouse enter render var album list const albums this props if albums user
  • 分配函数后如何删除 onmouseout 事件?

    我有一个问题 我正在为 onmouseout 事件分配一个函数 但运行该事件后 我需要将其删除 将非常感谢您的帮助 这取决于你的代码 如果你用 d3 这样做 那么你可以说 在 onmouseout 事件函数中 element on mous
  • 如何从 Visual Studio Code API 打开浏览器

    我只是在探索一种从用于开发扩展的 Visual Studio Code API 打开默认浏览器的方法 以下是我的代码 var disposable vscode commands registerCommand extension brow
  • javascript 加壳器与压缩器

    我想知道加壳器与压缩器的区别 优点是什么 即您应该在网络应用程序中部署压缩版本还是压缩版本 示例代码 var layout NAVVISIBLE 1 Init function this Resize Dimensions function
  • gjs 如何使用 g_data_input_stream_read_line_async 在 Gnome Shell 扩展中读取套接字流

    我正在尝试编写一个 Gnome Shell 扩展 通过 Socket 服务器与 Arduino 进行通信 服务器和 Arduino 运行良好 但我陷入了监听传入服务器消息的扩展代码 因为我需要一种非阻塞方法 所以使用异步读取行 https

随机推荐

  • CALayer 不显示

    这是我第一次尝试使用 CALayer 构建成功并且没有报告错误 所以我认为我一定做了一些明显错误的事情 但该图层根本不显示 void viewDidLoad Get Reliant Magenta in amazingly verbose
  • 正则表达式:忽略大小写

    如何使以下正则表达式忽略大小写 它应该匹配所有正确的字符 但忽略它们是小写还是大写 G a b 假设你想要whole正则表达式忽略大小写 你应该寻找i flag http www regular expressions info modif
  • Windows 8 的 mvvmlight 中缺少 EventToCommand 行为 - 解决方法?

    问题确实说明了一切 我正在使用 MVVM Light 用 XAML C 编写一个 Windows 8 应用程序 我注意到 EventToCommand 功能尚未实现 有人可以建议对此有任何解决方法吗 thanks 您现在可以使用 Event
  • 使用带有二进制存档的 boost 序列化时出错

    我在读取时收到以下错误boost archive binary iarchive进入我的变量 test serialization 9285 0x11c62fdc0 malloc can t allocate region mach vm
  • 使用当前用户的凭据进行 javamail NTLM 身份验证

    如何将 JavaMail API 与 NTLM 身份验证结合使用到 Exchange 服务器 而无需指定用户名和密码 而是自动使用当前登录用户的凭据 单点登录 我的目的是让我的客户端程序 在我公司网络中的 Windows 计算机上运行 能够
  • 如何在 Prolog 中计算数字序列的和

    任务是计算从0到M的自然数之和 我使用SWI Prolog编写了以下代码 my sum From To From gt To my sum From To S From 0 Next is 1 S is 1 my sum Next To S
  • JMS队列消息接收顺序

    我按顺序在同一目标中添加两条 JMS 消息 这两条消息的接收顺序是否与我添加它们的顺序相同 或者是否有可能进行相反的排序 即首先检索目的地中首先接收到的消息 我将添加到目的地 producer send Msg1 producer send
  • Groovy 二维数组

    我有3个数组 l1 l2 and l3 每个都有 5 个字符 e g l1 A B C D E 二维数组由这些组成 screen l1 l2 l3 所以它看起来像这样 screen 我怎样才能迭代这个数组 我打电话吗screen 5 or
  • 在单个图中,由“标签”列分割的所有列的箱线图

    看着箱线图 API 页面 http seaborn pydata org generated seaborn boxplot html seaborn boxplot 我想要看起来像这样的组合的东西 gt gt gt iris sns lo
  • gform_after_submission 发布到第三方 API

    我正在尝试使用客户WordPress网站的functions php文件中的gform after submission钩子将这串信息发送到第三方API 此url由第三方客户提供 我需要将其与每次注册相匹配 这是我在 Functions p
  • 使用 window.print 内容将网页下载为 pdf

    我想要一个链接 当单击该链接时 会自动开始下载网页的可打印版本 我正在使用Moodle 我想要的内容是完全相同的如果我使用 ctrl p 下载页面并保存为 pdf 或使用 a href Download web page a 我正是想要该内
  • 根据自定义数组位置排序帖子

    我想根据自定义字段列出帖子列表 这里我有 9 个帖子 有不同的 3 个位置 中 上 下 Post ID title position 1 Post1 Top 2 Post2 Bottom 3 Post3 Top 4 Post4 Bottom
  • C# - 使用 TableAdapter 从存储过程返回单个值返回 null

    我不明白 但我添加到表适配器的存储过程仅返回空值 它应该返回一个简单的整数值 在我使用数据集设计器进行的预览中 我可以清楚地获得我想要的整数值 但由于某种原因 我无法从我的代码中获取价值 我按照MSDN库的说明进行操作 http msdn
  • 对 solr 搜索结果进行排序。给出错误无法对多值字段进行排序:名称

    我对 Apache Solr 搜索比较陌生 我正在尝试对 Solr 查询中的结果集进行排序 查询 名称 abc AND 隐藏 false sort name desc 它显示错误 无法对多值字段进行排序 名称 Solr版本是 7 2 1 如
  • 将列的百分比设置为 0 (pandas)

    我有一个 pandas 数据框 我想将列的某些百分比设置为 0 假设 df 有两列 A B 1 6 2 7 3 8 4 4 5 9 我现在想将 df 的前 20 和后 20 的 B 设置为 0 A B 1 0 2 7 3 8 4 4 5 0
  • 通过 DFS 查找图中的强连通分量

    我正在阅读有关 BFS 和 DFS 的图算法 当我分析通过DFS在图中查找强连通分量的算法时 我想到了一个疑问 为了找到强连通分量 书 Coremen 做了什么 首先它在图上运行 DFS 以获得顶点的完成时间 然后再次以完成时间的降序在图的
  • 如何“安装”自定义 Windows 驱动程序?

    我计划用 C 语言编写一个基本的 Windows 注册表过滤器 该过滤器的目的是挂钩所有 用户和内核特权 注册表调用 以便我可以在我的程序中使用它们 我基本上是复制 Mark Rusinovich 的 regmon 进程监视器 但更基本 我
  • pdfBox 返回错误的编码字符

    我有一个pdfhttp www persianacademy ir UserFiles File fe1394 pdf http www persianacademy ir UserFiles File fe1394 pdf我想从中提取单词
  • Bash shell 中的“[ ]”与“[[ ]]”[重复]

    这个问题在这里已经有答案了 这可能已经得到回答 但我还是要问 我有两个版本的脚本 comp sh bin sh export tDay date Y m d newfile filename tDay filename filename 2
  • 直接加载页面到锚标记

    当我加载 URL 中带有哈希标记的页面时 页面会加载 然后跳转到锚标记 有没有什么方法可以防止这种 跳转 要么直接将页面加载到锚标记 要么至少使滚动平滑 我在 Chrome 和 Firefox 中看到这个问题 但在 IE 中没有 如果你仍然