Прокрутить HTML документ к заданной позиции

Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера.

Чтобы сделать переход плавно, можно использовать функцию jQuery().animate().

Суть процесса такова — вычисляем вертикальную позицию требуемого контейнера и задаём анимацию параметра scrollTop тега html или body.

Для конкретики пусть требуемый контейнер имеет id = myContainer.

Тогда js код, перематывающий документ к его началу, примет следующий вид:

Время анимации в данном примере 1/4 секунды. Возможно, время следует вычислять, исходя из расстояния, на которое требуется пролистать документ. Можете поэкспериментировать самостоятельно.

Мало букафф? Читайте есчо !

Обратный порядок перебора элементов jQuery each()

Сентябрь 17, 2019 г.

Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке. jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...

Читать

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM  в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-69ff735453977397534723/] ...

Читать

Ошибка в Drupal: once is not a function

Май 8, 2023 г.

В Drupal 9/10 нет jQuery плагина once(), потому при использовании этой функции вы увидите сообщение о том, что once - не является функцией. Плагин удобен, но его не сложно заменить в коде буквально парой вставок. Он работает по следующему алгоритму ...

Читать

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить такой ...

Читать
 

Комментарии к «Прокрутить HTML документ к заданной позиции»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: