如何在jQuery中滚动到一个元素？

Question

我已经在JavaScript中完成了以下代码，用于将焦点放在特定的元素上（branch1是一个a元素），

document.location.href="#branch1";

但是，由于我在我的 Web 应用程序中也使用了 jQuery，因此我希望使用 jQuery 来编写上述代码。我尝试过，但不知道为什么它不能工作。

$("#branch1").focus();

上述 jQuery（focus()）代码无法对 div 元素起作用，但是如果我尝试在文本框中使用相同的代码，则可以正常工作。请告诉我如何使用 jQuery 将焦点放在 div 元素上？

谢谢！

- Prashant

Answer 1

对于我的问题，这段代码起到了作用，我需要在页面加载时导航到一个锚标签:

$(window).scrollTop($('a#captchaAnchor').position().top);

实际上，您可以在任何元素上使用此方法，而不仅限于锚标签。

- Banning

---

应该使用"$(window).scrollTop"，而不是"$(this).scrollTop"。前者只有当"this"恰好与"window"相同时才起作用。 - fresskoma

Answer 2

和@user293153一样，我刚刚发现了这个问题，并且似乎没有得到正确的回答。

他的答案是最好的。但你也可以将元素动画化。

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);

- User123342234

---

如果您在 .live('click') 中使用它，发现窗口跳转到页面顶部，请将 "return false" 添加为最后一条语句，这可以解决IE和Chrome的问题 :D - max4ever

太棒了，它不需要插件。 - dynamic

请注意，尽管选择器中似乎不需要“html”，但 Firefox 在没有它的情况下无法滚动。因此，$('html, body') 可以工作，而 $('body') 不行（仅在 FF 中，在 IE 和 Chrome 中可以正常工作）。 - eon

Answer 3

你可以像这样扩展jQuery功能：

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

然后：

$('...').scrollToMe();

很简单 ;-)

- MCurbelo

---

我认为这是最好的解决方案。只需添加一次，然后就可以忘记它... :-) - Lukas Eder

非常好的解决方案。这种类型的解决方案将超越OP问题并缩短我的代码。 - Just a guy

@Oudin 我知道这个响应速度很慢，但是请将'html,body'替换为'.scrollable-container'，然后将scrollable-container添加到您的div类列表中。您还可以向scrollToMe添加一个参数，该参数接受任何您想要作为父级的特定选择器。 - Mike Atlas

谢谢，这是一个很好的答案。我不需要动画，所以我只是做了以下代码：scrollToMe: function () { var x = jQuery(this).offset().top - 100; $('html').scrollTop(x); }}); - Maks

谢谢，干得好。我扩展了这个功能，以处理滚动窗口中的滚动对象。jQuery.fn.extend({ scrollToMe: function (e) { if (typeof(e)=='undefined'){ e='html,body'; } var y = jQuery(this).offset().top; jQuery(e).animate({scrollTop: y}, 500); } }); - pgee70

这是最佳解决方案。 - Firas Nizam

Answer 4

请查看jQuery.ScrollTo，我认为那就是你想要的行为，请查看演示。

- CMS

---

这个答案在谷歌上排名第一。随着新的jQuery改进，正确的URL是http://plugins.jquery.com/scrollto/。 - Zmart

即使那个地址现在已经过时了。作者的 Github 存储库位于 https://github.com/flesler/jquery.scrollTo - geekuality

链接已过期，并非真正的jQuery，而是一个jQuery插件。 - Piotr Kula

Answer 5

看看jquery-scrollintoview吧。

ScrollTo很好用，但有时您只想确保UI元素可见，而不一定在顶部。 ScrollTo无法解决此问题。从scrollintoview的README中可以了解到：

这个插件如何解决用户体验问题

该插件将特定元素滚动到视图中，类似于浏览器内置功能（DOM的scrollIntoView()函数），但却有所不同（并且可以说更加用户友好）：

• 仅当元素实际上不可见时，它才会滚动到元素；如果元素在视图中（任何可见文档区域），则不会执行滚动；
• 它使用动画效果滚动；当进行滚动时，用户确切地知道他们没有被重定向到任何地方，而是在同一页中移动到其他位置（以及他们移动的方向）；
• 始终应用最小量的滚动；当元素位于可见文档区域上方时，它将滚动到可见区域的顶部；当元素位于可见区域下方时，它将滚动到可见区域的底部；这是最一致的滚动方式-当滚动总是到顶部时，有时无法将元素滚动到靠近滚动容器底部时（因此滚动是不可预测的）；
• 当元素的大小超过可见文档区域的大小时，其左上角将被滚动到；

- Jonathan Tran

Answer 6

使用

$(window).scrollTop()

它将滚动窗口到该项。

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);

- Nishad Up

---

请不要在多个问题中添加相同的答案。请回答最好的一个，并标记其余的为重复，一旦您获得足够的声望。如果它不是重复的，请[编辑]答案并根据问题进行调整。 - Zoe stands with Ukraine

Answer 7

如果你只是想要滚动到指定的元素，你可以使用 Element 的 scrollIntoView 方法。 以下是一个示例:

$target.get(0).scrollIntoView();

- chaosifier

---

谢谢！完全解决了我的问题。我还添加了{behavior: "smooth"}作为平滑滚动的参数。 - cleybertandre

Answer 8

根据你提供的例子，我认为你可能在寻找一个“锚点”。

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

focus() 方法在 jQuery 中的作用与您所尝试实现的不同。

- sktrdie

---

是的，我正在尝试实现相同的锚定任务。好的，如果 focus 不能做到，那么在 jQuery 中是否有其他方法可以实现这个功能？ - djmzfKnm

Answer 9

也许你想尝试这个简单的方法

$(document).ready(function() {
   $(".to-branch1").click(function() {
     $('html, body').animate({
         scrollTop: $("#branch1").offset().top
     }, 1500);
   });
});

- Bang Kudil

Answer 10

为了使focus()函数在div元素上工作，div需要具有tabindex属性。由于它不是输入字段，因此这种类型的元素通常不会默认设置。您可以添加一个tabindex，例如-1，以防止使用tab键的用户将其聚焦。如果您使用正数tabindex，则用户将能够使用tab键聚焦到div元素。

这里有一个例子：http://jsfiddle.net/klodder/gFPQL/

但是，在Safari中不支持tabindex。

- Klodder