jQuery: переместите область просмотра окна для показа недавно переключенного элемента
У меня есть отрывок jQuery в документе, готовом, который переключает отделение, содержащее 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 ниже текущей области просмотра браузера, это остается там, когда это показывают. Я хотел бы, чтобы курсор пользователя перешел к текстовой области и чтобы целая текстовая область была видима в окне.
3 ответа
Посмотрите на плагин scrollTo jQuery. Вы можете просто сделать что-то вроде этого:
$.scrollTo('div#addnote-area');
Или, если вы хотите анимировать его, укажите количество миллисекунд, в течение которых будет длиться прокрутка:
$.scrollTo('div#addnote-area', 500);
Без плагина 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)
jQuery's scrollTop также работает. Попробуйте установить следующие параметры:
$('#idOfElement').css('scrollTop', 10)
Вы можете получить высоту/ширину довольно легко, используя $(...).offset().