滚动到 javascript 或 jquery 中具有特定 id 的 html 元素

2023-12-28

我有分配了 id 的 html 元素。现在我想滚动到这些元素。我看到 jQuery 有一个scrollTop,它接受一个整数值。我如何轻松地将带有 id 的特定 html 元素滚动到顶部?理想情况下,动画精美流畅。

快速搜索显示了许多滚动插件...如果上述功能需要插件,那么最受欢迎的插件是什么?我也在使用jquery-ui。


你可以使用这样的东西来滚动到#someElement当页面加载时:

$(document).ready(function() {
    $("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000); 
});

它只是简单地动画化scrollTop的财产body元素,并使用某个特定元素的顶部偏移量作为滚动到的位置。动画持续1000ms。

注意:它选择两者html and body所以它可以跨浏览器工作。我不确定具体细节,但一些快速测试表明 Chrome 使用body,但 Firefox 和 IE 使用html.

这是一个工作示例 http://jsfiddle.net/68Msz/1/.

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

滚动到 javascript 或 jquery 中具有特定 id 的 html 元素 的相关文章

  • 使用 babel env 预设时,展开运算符出现语法错误

    我正在努力 现代化 meern io 入门样板 https github com Hashnode mern starter通过替换巴别塔es2015 and stage 0预设为env 然而 似乎env预设无法识别以下片段client m
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional
  • 获取选定的文本框 ID jQuery

    在我的表单中 我有几个文本框 例如txtItemCode1 txtItemCode2 etc 如果我在其中任何一个上按 Enter 键 我会使用此代码执行某些操作 但我想获取选定的文本框 ID 我怎样才能做到这一点 变量 id 应该有您正在
  • Blackberry - 自动滚动垂直字段管理器

    如何以编程方式沿特定方向滚动屏幕而不改变焦点 例如 当我们向下滚动到 FaceBook 应用程序中的 Feed 时 它会自动滚动屏幕以适合屏幕中央的所有文本 这可以在 Blackberry Java 开发中完成吗 谢谢 阿夫扎尔 如果出现以
  • 仅从功能区打开一个对话框

    我有一个带有登录按钮的功能区 可打开登录对话框 我想将对话框的数量限制为一个 我正在使用函数 displayDialogAsync startAddress options callback https learn microsoft co
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • select2 验证 - 选择至少一个值

    我在用select2 http ivaynberg github io select2 and jQuery 验证 http jqueryvalidation org 插件 select2 的 HTML div class form gro
  • 为什么 console.log() polyfill 不使用 Function.apply()?

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman
  • “$(document).ready”函数的替代方案

    我在 aspx 页面中使用 fancybox 对于灯箱 文档就绪功能在此页面中不起作用 有人告诉我编写一个新的 JavaScript 代码来加载该页面中的灯箱 包括 jQuery 检查网络选项卡 确保您没有收到 404 检查控制台是否没有收
  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • jQuery 相当于 underscore.js 的 groupBy

    jQuery 中是否有一个内置函数可以执行相当于http underscorejs org groupBy http underscorejs org groupBy 有什么解决方法吗 Thanks 不 jQuery 不是为数据处理而设计的
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • jQuery UI 对话框 - 关闭后无法打开

    我有一个问题jquery ui dialog box https jqueryui com dialog 问题是 当我关闭对话框然后单击触发它的链接时 除非刷新页面 否则它不会再次弹出 如何在不刷新实际页面的情况下回调对话框 下面是我的代码
  • 使用严格模式编译指示时如何声明全局变量

    使用自调用函数来包装严格模式兼容代码 通常称为严格模式编译指示 被认为是一种很好的做法 function use strict Strict code here 我的问题是在这种情况下如何声明全局变量 我今天知道的三种替代方案 替代方案 1
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f

随机推荐

  • 如何检查文件夹是否存在?

    我正在研究 Java 7 IO 的新功能 实际上我正在尝试检索文件夹中的所有 XML 文件 但是 当文件夹不存在时 这会引发异常 如何使用新 IO 检查该文件夹是否存在 public UpdateHandler String release
  • Google pydrive 将文件上传到特定文件夹

    我正在尝试将文件上传到我的 Google 驱动器 下面的代码有效 如何指定上传到哪个文件夹 即驱动器 与我共享 csvFolder from pydrive auth import GoogleAuth from pydrive drive
  • 从 UWP 商店应用程序向多个收件人发送电子邮件

    我有一个简单的目标 即打开一封电子邮件 在 Outlook 2016 中 其中为 Windows 10 UWP 应用程序中的多个收件人配置了 收件人 字段 我尝试了3种方法 1 推荐的方式 如UWP示例中的demod 使用EmailMess
  • 如何在 React Native 博览会中使用可教学机器模型

    我正在使用可教学机器导出模型 const modelJson require assets models model json const modelWeights require assets models weights bin use
  • ReactJs componentDidMount 执行两次

    我正在研究 ReactJs 并遇到一些问题 我的问题是我有一个使用最新 ReactJs v 18 0 0 的简单应用程序 并且 componentDidMount 执行两次 为什么 index js import createRoot fr
  • 如何暂时放弃root权限?

    我正在开发一个以 root 身份运行的守护进程 但需要与用户调用 API 我检查了 API 代码 它使用getuid 来获取用户 如果 root 用户通过以下方式放弃权限setuid 无法恢复到root 如果调用 seteuid API 仍
  • Laravel - Jenssegers MongoDB 嵌套数组更新不起作用

    有人可以指出我的代码有什么问题吗 我正在尝试通过 Laravel Jenssegers 更新 MongoDB 中的嵌套数组 这是我的代码 update status Journal where id 5cd10b325586e9122761
  • 使用 mongoose 创建动态模式

    我对 Node js 和 Mongoose 模块非常陌生 我正在尝试创建一个架构 其中有一些必填字段 而其他一些字段可以是动态的 我用过strict to false 我的代码如下所示 var mongoose require mongoo
  • hibernate中缺少@Temporal注释

    如果我们使用怎么办 Column name birth date nullable false length 19 public Date getBirthDate return this birthDate 代替 Temporal Tem
  • 试图摆脱空数据字段(一种空基优化?)

    我想要一个会计 仪表层 如果需要的话 它应该计算对象实例上的许多不同的 事件 事件 可以是发生的任何事情 例如 在一天结束时 您应该能够判断 文件已写入 5400 次 或者 锁拥塞 52 456 次 不拥塞 12 311 次 通过旋转获取
  • 在Python中绘制图表

    我是 Python 新手 正在尝试根据找到的 pyODE 教程绘制图表here http pyode sourceforge net tutorials tutorial1 html 我在用着pylab用于绘图 下面是代码的主要部分 add
  • Chrome 扩展程序无需单击图标即可加载脚本

    大家好 我想加载脚本 无论用户是否单击我的扩展图标 这是我的扩展 它工作得很好 但我希望它能够工作 而不需要用户单击图标来加载脚本 这是代码 name Injecta version 0 0 1 manifest version 2 des
  • 如何在 shell 脚本中缩小 JSON?

    我一直在寻找一种在 bash 控制台中丑化一些 JSON 的方法 这有助于随后在另一个命令中使用它 例如 将 json 内联传递给httpie Giving foo lorem bar ipsum 我想获得 foo lorem bar ip
  • 为什么 scala 值 class#toString 包含案例类信息?

    价值类别 http docs scala lang org overviews core value classes html可用于实现类型安全 而无需拆箱的开销 我的印象是 在运行时 此类类型 类将 不存在 被视为简单类型 例如 值类ca
  • nodeJs巨大数组处理抛出RangeError:超出最大调用堆栈大小

    这是处理大量条目的代码的一部分 最初它与文件系统一起工作并对文件进行一些操作 有什么好的方法可以绕过限制并防止抛出RangeError 超出最大调用堆栈大小 目前它允许我迭代大约 3000 个项目 var async require asy
  • TensorFlow:dataset.train.next_batch 是如何定义的?

    我正在尝试学习 TensorFlow 并研究以下示例 https github com aymericdamien TensorFlow Examples blob master notebooks 3 NeuralNetworks aut
  • 在 .NET 中获取默认 Windows 系统颜色

    我正在编写一个自定义按钮控件作为 即将成为 免费控件套件的一部分 并且我希望将我的 默认 控件颜色基于相应的 Windows 系统颜色 因此 在网上查找 默认 Windows 系统颜色 后 我找不到有关 Windows 控件 尤其是按钮控件
  • 如何在 iOS 上旋转自定义启动屏幕?

    我的启动屏幕可以正常工作 但我的应用程序可以在横向模式下运行 并且启动屏幕以默认的纵向模式显示 如何启动应用程序 以便启动屏幕像我的应用程序一样在横向模式之间旋转 我正在使用以下代码 BOOL shouldAutorotateToInter
  • 使用 MVVM 分配数据上下文的最佳方法是什么?

    我一直在寻找设置数据上下文属性的最佳方法 我找到了三种方法 在视图上分配数据上下文 在 XAML 或隐藏代码上 通过构造函数在 ViewModel 上分配数据上下文 使用一些配置来获取视图和视图模型引用 并通过一些基础结构类在运行时绑定数据
  • 滚动到 javascript 或 jquery 中具有特定 id 的 html 元素

    我有分配了 id 的 html 元素 现在我想滚动到这些元素 我看到 jQuery 有一个scrollTop 它接受一个整数值 我如何轻松地将带有 id 的特定 html 元素滚动到顶部 理想情况下 动画精美流畅 快速搜索显示了许多滚动插件