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

Question

我有一段在文档就绪时的 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 
});

单击链接时，切换工作正常。 我遇到的问题是，如果

在当前视口下方，则在显示时仍会保留它。 我希望用户的光标进入文本区域，并且整个文本区域都可在窗口中查看。

- k00k

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)

- Ben

---

动画解决方案似乎在Chrome上运行正常，但在Firefox（18.0.1）上不起作用。我对JS/jQuery不太熟悉，有人知道可能是什么原因吗？ - Michael Pell

尝试为 body 和 html 添加动画效果。使用 $（'body，html'）。 - Ben

Answer 2

看一下scrollTo jQuery插件。你可以像这样简单地操作:

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

或者，如果您想要动画效果，请提供滚动持续的毫秒数：

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

- Matt Huggins

---

@Matt 谢谢，这就解决了！希望有一个简单的jQuery（非插件）方法，但我会接受它。 - k00k

Answer 3

jQuery的scrollTop也可以使用。尝试设置如下：

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

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

- Nathan Garrett