JQuery: переместить окно окна просмотра, чтобы показать только что переработанный элемент

У меня есть фрагмент 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 находится ниже текущего div#addnote-area просмотра браузера, оно остается там, когда оно отображается. Мне бы хотелось, чтобы пользовательский курсор переместился на текстовую область, и чтобы вся текстовая область была видна в окне.

Ответ 1

Просмотрите scrollTo jQuery plugin. Вы можете просто сделать что-то вроде этого:

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

Или, если вы хотите оживить его, укажите число миллисекунд для прокрутки до последнего:

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

Ответ 2

Без плагина 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)

Ответ 3

jQuery scrollTop также работает. Попробуйте установить:

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

Вы можете легко получить высоту/ширину, используя $(...).offset().