При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Октябрь 14, 2017 г.
Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов.
Плагины позволяют подставить в бекграунд ...
Читать
Январь 14, 2018 г.
Дочерние документы не могут самостоятельно читать данные из родительского фрейма, если тот находится на другом домене. Возможны исключения для под-доменов одного и того же доменного имени.
Все это связано с мерами безопасности и т.п. чепухи. :). Для ...
Читать
Июль 13, 2016 г.
Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться?
Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...
Читать
Июнь 21, 2025 г.
Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете ...
Читать