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

我在doc中准备了一段jQuery，它可以切换包含textarea的div：

 $('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 }); 

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

点击此处查看图片http://sofzh.miximages.com/jquery/5ousuv.png

Answer 1

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

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

或者，如果要为其设置动画，请提供滚动到最后的毫秒数：

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

Answer 2

没有 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 3

jQuery的scrollTop也有效。 尝试设置如下：

  $('#idOfElement').css('scrollTop', 10) 

使用$(...).offset()可以很容易地获得高度/宽度。