如何在 jQuery 中滚动到元素？

我已经用 JavaScript 编写了以下代码，将焦点放在特定的元素上(branch1是一个元素) ,

document.location.href="#branch1";

但是由于我也在我的 web 应用程序中使用 jQuery，所以我想用 jQuery 来完成上面的代码。我试过了，但不知道为什么它不工作,

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

上面的 jquery (focus ())代码对 div 不起作用，但是如果我用 textbox 尝试相同的代码,

请告诉我，如何使用 jQuery 将焦点放在 div 元素上？

谢谢！

158929 次浏览
小开

我认为你可能正在寻找一个“锚”给你的例子。

<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>

焦点 jQuery 方法所做的与您试图实现的不同。

小开
最佳答案

检查 JQuery. ScrollTo，我认为这是你想要的行为，检查 小样。

小开

对于我的问题，这个代码工作，我不得不导航到一个锚标记页面加载:

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

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

小开

就像@user293153一样，我只是刚刚发现这个问题，而且似乎没有得到正确的回答。

他的回答是最好的。但你也可以动画元素以及。

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

您可以这样扩展 jQuery 功能:

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

然后:

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

-)

小开

为了使 focus ()函数在元素上工作，div 需要有一个 tabindex 属性。默认情况下，这种类型的元素可能不会执行此操作，因为它不是输入字段。例如，可以在 -1处添加一个制表索引，以防止使用制表符的用户关注它。如果您使用正值 tabindex，用户将能够使用 tab 来关注 div 元素。

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

但是，在 Safari 中不支持 tabindex。

小开

看看 Jquery-scrollintoview。

ScrollTo 很好，但通常您只是想确保 UI 元素是可见的，而不一定是在顶部。滚动条帮不了你。来自 scrollintoview 的 README:

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

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

  • 它只在元素实际不在视图中时才滚动到元素; 如果元素在视图中(可见文档区域中的任何位置) ，则不滚动 会进行;
  • 它使用动画效果滚动; 当滚动被执行时，用户确切地知道它们没有被重定向到任何地方，而是实际看到 它们只是在同一页面内被移动到了其他地方(同样 比如它们朝哪个方向移动) ;
  • 应用的滚动总是最小的; 当元素位于可见文档区域之上时，它将滚动到 可见区域的顶部; 当元素在可见区域的下面时，它将是 滚动到可见区域的底部; 这是最一致的 滚动的方式-当滚动总是会超过它有时 当一个元素接近 可滚动的容器(因此滚动是不可预测的) ;
  • 当元素的大小超过可见文档区域的大小时，它的左上角就是要滚动到的那个;
小开

使用

$(窗口) . scrollTop ()

它会滚动窗口到该项目。

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

如果只是想滚动到指定的元素，可以使用 Element 的 ScrollIntoView方法。 这里有一个例子:

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

也许你想试试这个简单的

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

提交答案