Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 26, 2015 г.
Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...
Читать
Декабрь 13, 2018 г.
Если пользуетесь jQuery плагином fancybox, то могли сталкиваться с тем, что необходимо увязать логику каких то других скриптов с фактом, показан ли попап ...
Читать
Сентябрь 7, 2013 г.
Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню.
Неудобным будет тот случай, когда мы хотим попасть на страницу в глубине иерархии этого меню. Нам придется последовательно заходить на родительские ...
Читать
Октябрь 19, 2015 г.
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. ...
Читать