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

Question

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

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)

Answer 2

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

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

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

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

Answer 3

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

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

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