Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера.
Чтобы сделать переход плавно, можно использовать функцию jQuery().animate().
Суть процесса такова — вычисляем вертикальную позицию требуемого контейнера и задаём анимацию параметра scrollTop тега html или body.
Для конкретики пусть требуемый контейнер имеет id = myContainer.
|
|
<div id="myContainer"></div> |
Тогда js код, перематывающий документ к его началу, примет следующий вид:
|
|
//scroll to map top jQuery('html, body').animate({ scrollTop: jQuery('#myContainer').offset().top }, 250); |
Время анимации в данном примере 1/4 секунды. Возможно, время следует вычислять, исходя из расстояния, на которое требуется пролистать документ. Можете поэкспериментировать самостоятельно.
Данная запись опубликована в 06.07.2018 16:16 и размещена в рубрике jQuery.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Сентябрь 1, 2013 г.
Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal.
Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...
Читать
Октябрь 19, 2015 г.
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. ...
Читать
Апрель 29, 2017 г.
Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...
Читать
Октябрь 18, 2015 г.
С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов.
Используем функцию $.each(func)
Разработчики не могли не заложить перебор по найденным элементам в библиотеку. Параметром должна ...
Читать