jQuery 通过按钮 onclick 跳转或滚动到页面上的特定位置、div 或目标 [重复]

2023-12-01

当我单击按钮时,我希望能够向下跳转或滚动到页面上的特定 div 或目标。

$('#clickMe').click(function() {
    //jump to certain position or div or #target on the page
});

我怎样才能做到这一点?


我会将链接样式设置为看起来像按钮,因为这样就存在无 js 后备。


这就是使用 jquery 制作跳跃动画的方法。 No-js 后备是没有动画的正常跳转。

原始示例:

jsfiddle

$(document).ready(function() {
  $(".jumper").on("click", function( e ) {

    e.preventDefault();

    $("body, html").animate({ 
      scrollTop: $( $(this).attr('href') ).offset().top 
    }, 600);

  });
});
#long {
  height: 500px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Links that trigger the jumping -->
<a class="jumper" href="#pliip">Pliip</a>
<a class="jumper" href="#ploop">Ploop</a>
<div id="long">...</div>
<!-- Landing elements -->
<div id="pliip">pliip</div>
<div id="ploop">ploop</div>

新例子链接的实际按钮样式,只是为了证明一点。

一切本质上都是一样的,除了我改变了班级.jumper to .button我添加了 css 样式以使链接看起来像按钮。

Button styles example

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

jQuery 通过按钮 onclick 跳转或滚动到页面上的特定位置、div 或目标 [重复] 的相关文章

  • 将 Isotope 与通过 XML 和 jQuery 加载的对象一起使用。这可能吗?

    我正在使用 XML 和 jQuery 加载对象 并尝试连接到同位素 但似乎这是不行的 这可能吗 我尝试了许多不同的解决方案 但似乎找不到有效的解决方案 这就是我所拥有的 我已经尝试过同位素中的回调函数 但仍然没有运气 我用 XML 调用我的
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 如何排除CSS伪类选择器中的最后一个子元素

    我想为从 4 到 n 1 的子 div 应用特定样式 我能够从 4 到 n 执行此操作 但无法排除最后一个 div 这是 jsfiddlehttp jsfiddle net 8WLXX http jsfiddle net 8WLXX con
  • 如何检查jquery数据表中的每个复选框?

    我有一个第一列带有复选框的表格 我使用 jQuery DataTable 插件显示我的表格 我制作了 2 个链接来选择 取消选择每个复选框 这是选择全部的一个 a href Select all a 和 JavaScript functio
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • CSS:在 hsla 中使用 hsl 变量?

    假设我有一个 CSS 变量hsl定义如下 white 1 hsl 0deg 0 100 现在 我想使用相同的白色 但不透明度为 50 所以 像这样 white 2 hsla 0deg 0 100 50 有没有办法使用第一个变量 white
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 如何使用 .append() 将 React 组件附加到 HTML 元素

    我正在尝试对我的博客实现无限滚动 我有 const articlesHTML document querySelector articles 作为容器 每次点击装载更多按钮 我想将新文章附加到主 html 元素 如下所示 const res
  • Javascript - 如何计算数字的平方?

    使用 JavaScript 函数 function squareIt number return number number 当给定数字 4294967296 时 函数返回 18446744073709552000 每个人都知道真正的答案是
  • 加载 Ember.View 的内容后初始化 jQuery 插件

    DEBUG Ember VERSION 1 0 0 rc 6 ember js DEBUG Handlebars VERSION 1 0 0 rc 4 ember js DEBUG jQuery VERSION 1 9 1 控制器是一个Em
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • 按钮轮廓大于按钮尺寸

    我试图制作一个带有 3 个点的按钮 虽然它带来了奇怪的问题 当你点击它时 你会注意到在焦点模式下有一座奇怪的 山 button letter spacing 2px padding top 4em padding bottom 8em li
  • 我可以防止将 Leaflet 地图平移到世界边缘之外吗?

    有没有办法限制平移到世界边缘之外 在这幅画中 棕色是世界 灰色是虚空 我想让它不可能像这样平移 Leaflet 允许您控制地图抵抗被拖出边界的程度maxBoundsViscosity选项 值 0 到 1 将其设置为最大值会完全禁用拖动出界
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 为什么声明顺序对于通用成员很重要?

    今天我注意到以下内容无法编译 open System type MyType member this Something this F 3 this F boo This expression was expected to have ty
  • 使用 Google Maps JavaScript API v3 突出显示某个区域

    我想突出显示如下图所示的区域 该区域取自谷歌地图 使用当前版本的 API v3 可以实现这一点吗 如果是 怎么办 提前致谢 您需要知道该区域的顶点并根据它们创建多边形 但多边形目前不支持虚线描边 如果您需要虚线描边 则必须根据顶点创建具有不
  • 画布内部的 tkinter 框架未扩展以填充区域

    我有一个可滚动框架类 是从我发现的一些代码中借用的 但我无法调整它以满足我的需求 它是由 pack 管理的 但我需要使用 grid 所以我简单地打包了一个框架 self region 到它里面 这样我就可以在里面网格我的小部件 但是 该框架
  • jQuery(this) 和外部接口

    大家好 我有ExternalInterface 来调用javascript 函数 但是我现在如何使用 jQuery 来定位调用该函数的 swf 例如 我使用ExternalInterface 调用 changeObject 函数 我如何让
  • Java - 创建新文件,如何使用方法指定目录?

    我知道如何写一个file执行以下操作到指定目录 public void writefile try Writer output null File file new File C results results txt output new
  • PushViewController 花费太多时间来显示视图

    我有一个非常轻的 ViewController 它在 viewDidLoad 中什么也不做 我将此视图推到导航控制器之上 执行此操作的方法是从块内部调用的 调用 showView 后 我添加了一个 NSLog 该日志在控制台中打印得非常快
  • 在单独的 .kv (Kivy) 文件中定义的屏幕之间切换

    我曾经通过在单个 kv 文件中定义所有内容 包括屏幕 来设法使多屏幕程序运行 通过使用root current 在 kv 文件中 或self root current 在 Python 文件中 我能够在屏幕之间切换 然而 一旦存在多个包含许
  • 在用户交互之前,dgrid 0.4.0 树看起来很平坦

    尝试使用 dgrid 0 4 0 显示树结构 没有使用过以前版本 0 3 x 的经验 我用两个文件夹构建了这个示例 alice 和 bob 每个都会有一些文件 叶子 商店 astore js define dojo base declare
  • 如何在 bazel 中为 Python 和 pip 选择运行时?

    我正在尝试在 Ubuntu 20 04 上构建一个应用程序 其中 python3 指向 Python3 8 并且我正在构建 aganist Python3 6 我在 WORKSPACE 的同一目录中有以下运行时 cat BUILD baze
  • 连接/聚合字符串的最佳方法

    我正在寻找一种将不同行的字符串聚合到一行中的方法 我希望在许多不同的地方做到这一点 所以有一个函数来促进这一点会很好 我尝试过使用解决方案COALESCE and FOR XML 但他们就是不适合我 字符串聚合会做这样的事情 id Name
  • 如何从通过 XMLHttpRequest 接收的 html 页面创建 DOM 对象?

    我正在开发一个 chromium 扩展 因此我对我请求权限的域具有 XMLHttpRequests 的跨主机权限 我使用了 XMLHttpRequest 并获得了一个 HTML 网页 txt html 我想使用 XPath document
  • Angular UI-Router 模式删除父状态

    我正在开发一个具有 ui router 模块的角度应用程序 当进入路由器的某种状态时 我会显示一个模式对话框 然后它会替换我的父视图 我想保留父视图并将模式显示为叠加 有没有办法用 ui router 做到这一点 举个例子 statePro
  • iOS (FMX) 上的“保存到文件”

    我想将电子邮件附件保存到我的应用程序的文档文件夹 适用于 iOS 和 Android 的 C FMX 应用程序 如何将我的应用程序注册为目标 下面的屏幕截图显示我手机上名为 Termius 的应用程序是保存文件的目标 我希望我的应用程序成为
  • 有没有办法在chrome自定义选项卡中加载html内容

    是否可以使用 android 中的 chrome 自定义选项卡加载本地 html 内容 网上查了没找到解决办法 谁能帮忙啊 无法使用 Chrome 自定义选项卡直接加载 HTML 内容 但您可以尝试将内容保存到本地文件并提供 file UR
  • 无法在 Mac OS X 上安装 MySQL

    我遇到了这个问题中描述的确切问题 MYSQL安装问题 不幸的是 没有一个答案对我有帮助 并且它已关闭 我尝试学习 Ruby on Rails 但没有让 MySQL 工作 所以它与编程相关 我输入 rake db create并得到 The
  • 如何在android中方向改变时继续视频播放

    我使用 videoview 在 android 默认播放器中播放视频 当我改变它的方向时 它从头开始播放 我怎样才能让它从方向改变的那一点继续下去 Add
  • 代码隐藏检查以查看控件是否已设置为显示:无?

    我目前有一个隐藏在我的服务器端的控件dropdown hide hide 是我创建的用于隐藏我的方法的服务器端方法 例如 control Style display none 在服务器端如何判断我的控件是否隐藏 我猜你的意思不仅仅是做 if
  • 无法使用preparedStatement创建表

    我无法使用以下命令在数据库 mySQL 中创建表preparedStatement并尝试输入未来表的名称preparedStatement setInteger static String queryCreateTable CREATE T
  • 在 ReportNG 中未获取 TestNG 的报告

    我正在 eclipse 中执行 testng 我想在 reportNG 中生成报告 为此 我已经包含了 guice 3 0 reportng 1 1 3 velocity dep 1 4 jar 文件 并在 xml 文件中添加了侦听器 此外
  • jQuery 通过按钮 onclick 跳转或滚动到页面上的特定位置、div 或目标 [重复]

    这个问题在这里已经有答案了 当我单击按钮时 我希望能够向下跳转或滚动到页面上的特定 div 或目标 clickMe click function jump to certain position or div or target on th