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

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

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

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

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

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

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

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

Украшательства на сайте : делаем надпись поверх картинки

Март 13, 2013 г.

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки ...

Читать

Fancybox прокручивает основное окно к верху

Июль 13, 2016 г.

Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться? Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...

Читать

Сообщение Cannot read property 'msie' of undefined

Апрель 13, 2017 г.

Два вероятных случая могут генерировать данное сообщение в консоли браузера. Раннее обращение к js плагину Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...

Читать

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать
 

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

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



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