74

我在 JavaScript 中完成了以下代码以将重点放在特定元素上(branch1 是一个元素),

document.location.href="#branch1";

但由于我也在我的网络应用程序中使用 jQuery,所以我想在 jQuery 中执行上述代码。我试过了,但不知道为什么它不起作用,

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

上面的 jquery (focus()) 代码不适用于 div,而如果我尝试使用文本框使用相同的代码,那么它的工作,

请告诉我,如何使用 jQuery 将注意力集中在 div 元素上?

谢谢!

4

10 回答 10

117

对于我的问题,这段代码有效,我必须在页面加载时导航到锚标记:

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

就此而言,您可以在任何元素上使用它,而不仅仅是锚标记。

于 2010-03-13T21:47:41.693 回答
52

就像@user293153 我只是发现了这个问题,似乎没有得到正确的回答。

他的回答是最好的。但是您也可以为元素设置动画。

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
于 2010-07-04T00:52:11.033 回答
40

您可以像这样扩展 jQuery 功能:

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

进而:

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

简单的 ;-)

于 2011-09-23T15:26:07.160 回答
32

检查jQuery.ScrollTo,我认为这是你想要的行为,检查demo

于 2009-02-01T06:50:12.327 回答
4

查看jquery-scrollintoview

ScrollTo 很好,但通常您只是想确保 UI 元素可见,不一定在顶部。ScrollTo 对此没有帮助。从 scrollintoview 的自述文件:

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

此插件将特定元素滚动到类似于浏览器内置功能(DOM 的 scrollIntoView() 函数)的视图中,但工作方式不同(并且可以说对用户更友好):

  • 它仅在元素实际上不在视野中时滚动到元素;如果元素在视图中(可见文档区域中的任何位置),则不会执行滚动;
  • 它使用动画效果滚动;当执行滚动时,用户确切地知道他们没有被重定向到任何地方,但实际上看到他们只是在同一页面内的其他地方移动(以及他们移动的方向);
  • 总是有最小量的滚动被应用;当元素在可见文档区域上方时,它将滚动到可见区域的顶部;当元素低于可见元素时,它将滚动到可见区域的底部;这是最一致的滚动方式 - 当滚动总是在顶部时,当元素接近可滚动容器的底部时,有时无法将元素滚动到顶部(因此滚动将是不可预测的);
  • 当元素的大小超过可见文档区域的大小时,它的左上角是滚动到的那个;
于 2013-01-21T17:07:53.670 回答
3

采用

$(窗口).scrollTop()

它会将窗口滚动到该项目。

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);
于 2015-11-26T08:02:27.843 回答
3

如果你只是想滚动到指定的元素,你可以使用 Element 的scrollIntoView方法。这是一个例子:

$target.get(0).scrollIntoView();
于 2020-09-08T05:04:05.860 回答
1

鉴于您的示例,我认为您可能正在寻找“锚”。

<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 方法的作用与您想要实现的不同。

于 2009-02-01T06:31:26.360 回答
0

为了让 focus() 函数作用于元素,div 需要有一个 tabindex 属性。默认情况下,这种类型的元素可能不会这样做,因为它不是输入字段。例如,您可以在 -1 添加一个 tabindex,以防止使用 tab 的用户专注于它。如果您使用正向 tabindex 用户将能够使用 tab 来关注 div 元素。

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

但是 Safari 不支持 tabindex。

于 2012-08-15T12:31:38.747 回答
0

也许你想试试这个简单的

$(document).ready(function() {
   $(".to-branch1").click(function() {
     $('html, body').animate({
         scrollTop: $("#branch1").offset().top
     }, 1500);
   });
});
于 2022-02-17T18:30:49.460 回答