如何滚动到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。