При установке значения hash в url окна, к примеру так: window.location.hash = ‘#something’; браузер прокрутит документ до позиции элемента вида <a name=’something’></a>. Иногда такое поведение является не желательным.
После изменения позиции видимой части документа, нужный вам объект может быть скрыт, к примеру контейнером с fixed позиционированием. Это часто бывает, когда дизайн предусматривает наличие «плавающих» элементов вроде навигации, корзины и т.п.
Решение состоит в том, чтобы использовать метод history.replaceState(), он не инициирует перемотку к контейнеру. И дополнительно (если требуется) можно добавить плавный скролл с позицией не точно на контейнер, а со смещением, учитывающим особенности вашего шаблона.
|
|
var id = 'NEW-HASH-VALUE'; history.replaceState({}, '', '#' + id); var anchor = $('a[name=' + id +']'); if (anchor.length) { var pos = anchor.offset().top - 150; $('html, body').animate({ scrollTop: pos }, 500); } |
В примере используется jQuery.
Данная запись опубликована в 21.02.2020 16:56 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Август 31, 2015 г.
Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов.
Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...
Читать
Апрель 11, 2018 г.
swiper js - jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.
SWIPER на GITHUB.
Это стандартный шаблон, который ...
Читать
Ноябрь 18, 2016 г.
Если вы начали применять вложенные циклы ng_repeat, но не сильно вникали как это работает, то могли столкнуться с проблемой видимости итератора внешнего цикла во внутреннем.
В контексте цикла Angular создает несколько переменных, одна из них - ...
Читать
Февраль 2, 2018 г.
Столкнулся с данной проблемой в своей работе. Опишу более подробно.
Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...
Читать