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

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

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

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

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

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

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

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

Установка значения атрибута HTML DOM элемента средствами js

Декабрь 17, 2018 г.

При работе с HTML документом из JavaScript одной из типовых операций является установка значения того или иного атрибута выбранного контейнера (тега). Vanila JS В чистом js (vanila) значение атрибута можно установить следующим образом: [crayon-68e6a33d2e0ca809161908/] ...

Читать

Прерывание цикла jQuery функции $.each()

Ноябрь 17, 2018 г.

Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()? Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

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

Май 8, 2023 г.

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

Читать
 

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

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



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