Question

我在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 
});

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

Click here to see an image http://i50.tinypic.com/5ousuv.png

Answer 1

没有 scrollTo插件

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

编辑：我确实从这个老答案中得到了很多分数：）

这是一个奖励，这也可以是动画。

只需使用animate()功能并定位正文标记：

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

您可以使用$(...).offset()轻松获得身高/宽度。

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

3 个答案: