如何滚动到jQuery中的元素?

我已经在JavaScript中做了以下代码,把焦点放在特定的元素(branch1是一个元素),

document.location.href="#branch1"; 

但是,因为我也在我的web应用程序中使用jQuery,所以我想在jQuery中执行上面的代码。 我已经尝试过,但不知道为什么它不工作,

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

上面的jquery(焦点())代码不能为div工作,而如果我想与文本框相同的代码,那么它的工作,

请告诉我,我怎样才能把重点放在使用jQuery的div elemnt?

谢谢!

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

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

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

对于这个问题,你可以在任何元素上使用它,而不仅仅是一个锚标签。

像@ user293153我只是刚刚发现这个问题,似乎没有被正确回答。

他的回答是最好的。 但是你也可以animation元素。

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

您可以像这样扩展jQueryfunction:

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

接着:

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

简单 ;-)

检查出jquery-scrollintoview 。

ScrollTo是好的,但通常你只是想确保一个UI元素是可见的,不一定在顶部。 ScrollTo不会帮助你。 从scrollintoview的自述文件:

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

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

  • 当元素实际上不在视图中时,它只滚动到元素; 如果元素在视图中(在可见文档区域中的任何地方),则不执行滚动;
  • 它使用animation效果滚动; 当执行滚动时,用户确切地知道他们没有被redirect到任何地方,但是实际上看到他们被简单地移动到同一页面内的其他地方(以及他们移动的方向)。
  • 总是有最less量的滚动应用; 当元素在可见文档区域之上时,它将滚动到可见区域的顶部; 当元素低于可见区域时,将滚动到可见区域的底部; 这是滚动的最一致的方式 – 当滚动总是在顶部时,它有时在接近可滚动容器的底部时不能将元素滚动到顶部(因此滚动将是不可预知的)。
  • 当元素的大小超过可见文档区域的大小时,它的左上angular是将被滚动到的那个;

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

 <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方法做了什么不同于你想要实现的东西。

使用

$(窗口).scrollTop()

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

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

要使focus()函数在元素上工作,div需要有一个tabindex属性。 对于这种types的元素,这可能不是默认的,因为它不是input字段。 例如,您可以在-1处添加tabindex,以防止使用Tab的用户专注于它。 如果您使用正面的tabindex用户将能够使用选项卡专注于div元素。

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

但是Safari中不支持tabindex。