如何滚动到 jQuery 中的元素?

IT技术 javascript jquery html focus
2021-03-21 12:43:03

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

document.location.href="#branch1";

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

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

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

请告诉我,如何使用 jQuery 将重点放在 div 元素上?

谢谢!

6个回答

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

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

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

您应该使用“$(window).scrollTop”而不是“$(this).scrollTop”。当“this”恰好与“window”相同时,第一个才起作用。
2021-04-24 12:43:03

像@user293153 一样,我才刚刚发现这个问题,似乎没有正确回答。

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

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);
如果您在 .live('click') 中使用它并且您注意到窗口跳转到页面顶部,则添加“return false”作为最后一条语句,它解决了 IE 和 Chrome 的问题:D
2021-04-28 12:43:04
惊人的。它不需要插件。
2021-05-01 12:43:04
请注意,尽管选择器中似乎不需要“html”,但 Firefox 不会在没有它的情况下进行滚动。所以 $('html, body') 有效,$('body') 无效(仅 FF,在 IE 和 Chrome 中它工作正常)。
2021-05-08 12:43:04

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

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

接着:

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

简单 ;-)

非常好的解决方案。这种类型的解决方案将超越 OP 问题并缩写我的一堆代码。
2021-04-21 12:43:04
@Oudin 我知道这响应速度很慢,但是替换'html,body''.scrollable-container'然后添加scrollable-container' to the list of classes on your div. You could also add a parameter to scrollToMe`,它采用您希望成为父级的任何特定选择器。
2021-04-30 12:43:04
谢谢,这是一个很好的答案。我不需要动画,所以我就做了scrollToMe: function () { var x = jQuery(this).offset().top - 100; $('html').scrollTop(x); }});
2021-05-12 12:43:04
谢谢,干得好。我将其扩展为处理滚动窗口中的滚动对象。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); } });
2021-05-14 12:43:04
我认为这是最好的解决方案。只需添加一次,然后忘记它...... :-)
2021-05-15 12:43:04

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

甚至那个地址现在也已经过时了。作者的 Github 存储库位于github.com/flesler/jquery.scrollTo
2021-05-01 12:43:04
链接过时,并不是真正的 jQuery,而是一个 jQuery 插件。
2021-05-05 12:43:04
这个答案首先弹出谷歌。在新的 jQuery 改造中,新的、正确的 URL 是plugins.jquery.com/scrollto
2021-05-07 12:43:04

查看jquery-scrollintoview

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

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

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

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