jQuery:移动窗口视口以显示刚切换的元素 [英] jQuery: move window viewport to show freshly toggled element

问题描述

我在文档中准备了一个jQuery片段，可切换包含textarea的div:

I have a snippet of jQuery in doc ready which toggles a div containing a 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低于浏览器的当前视口，则显示时它会保留在该视口中.我希望用户的光标转到文本区域，并使整个文本区域在窗口中可见.

The toggle works fine when clicking the link. The problem I'm having is that if div#addnote-area is below the browser's current viewport, it remains there when it's shown. I'd like the user's cursor to go to the textarea and for the whole textarea to be viewable in the window.

推荐答案

查看 scrollTo jQuery插件.您可以简单地执行以下操作:

Check out the scrollTo jQuery plugin. You can simply do something like this:

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

或者，如果要对其进行动画处理，请提供毫秒数以使滚动到最后:

Or, if you want to animate it, provide the # of milliseconds for the scrolling to last:

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

这篇关于jQuery:移动窗口视口以显示刚切换的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！