jQuery从按钮onclick跳转或滚动到页面上的某个位置，div或目标[重复]

Posted 2023-03-10

【中文标题】jQuery从按钮onclick跳转或滚动到页面上的某个位置，div或目标[重复]

【英文标题】：jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]

【发布时间】：2013-02-16 00:36:27

【问题描述】：

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

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

我该怎么做？

【参考方案1】：

我会将链接的样式设置为按钮，因为这样就没有 js 后备。

---

这就是你如何使用 jquery 为跳跃设置动画的方法。 No-js fallback 是没有动画的正常跳转。

原始示例：

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 更改为 .button 并添加了 css 样式以使链接看起来像按钮之外，一切都基本相同。

Button styles example

【讨论】：

OP 提到他们想使用一个按钮。

【参考方案2】：

$("html, body").scrollTop($(element).offset().top); // <-- Also integer can be used

【讨论】：

不能让它工作，我在哪里指定了 div #goHere，我需要它来向下滚动页面到特定的 div。欢呼

嘿，您必须将 $(element) 替换为 $("#goHere")。 $("body") 将保持原样，因为我们要移动 body 的滚动条。

这段代码在 chrome 中运行良好，但在 Firefox 中不行，至少在 ff 21.0 中不行 :(

解决方法是添加$("body, html").scrollTop(...)

我想实现这个效果，但是我是n00b。这段代码去哪儿了？