jQuery:移动窗口视口以显示新切换的元素

Question

我在doc中准备了一段jQuery,它可以切换包含以下内容的div textarea:

$('div#addnote-area').hide(); // hide the div
$('a#addnote-link').click(function() { // click event listener on link
     $('div#addnote-area').toggle(); // toggle the hidden div 
});

单击链接时切换工作正常.我遇到的问题是,如果div#addnote-area它低于浏览器的当前视口,它会在显示时保留在那里.我希望用户的光标转到textarea,并且整个textarea可以在窗口中查看.

点击此处查看图片http://i50.tinypic.com/5ousuv.png

Answer 1

没有 scrollTo插件

$(window).scrollTop($('div#addnote-area').offset().top)

编辑:嗯,我肯定从这个老答案得到了很多分数:)

这是一个奖励,这也可以是动画.

只需使用该animate()功能并定位body标签:

$('body').animate({scrollTop:$('div#addnote-area').offset().top},500)

在Stackoverflow上试试吧!打开检查器控制台并运行

$('body').animate({scrollTop:$('#footer').offset().top},500)

Answer 2

查看scrollTo jQuery 插件。你可以简单地做这样的事情：

$.scrollTo('div#addnote-area');

或者，如果您想为其设置动画，请提供滚动持续的毫秒数：

$.scrollTo('div#addnote-area', 500);