Как избежать изменения позиции scroll в документе после установки #hash

При установке значения hash в url окна, к примеру так: window.location.hash = ‘#something’; браузер прокрутит документ до позиции элемента вида <a name=’something’></a>. Иногда такое поведение является не желательным.

После изменения позиции видимой части документа, нужный вам объект может быть скрыт, к примеру контейнером с fixed позиционированием. Это часто бывает, когда дизайн предусматривает наличие «плавающих» элементов вроде навигации, корзины и т.п.

Решение состоит в том, чтобы использовать метод history.replaceState(), он не инициирует перемотку к контейнеру. И дополнительно (если требуется) можно добавить плавный скролл с позицией не точно на контейнер, а со смещением, учитывающим особенности вашего шаблона.

В примере используется jQuery.

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

Как сделать кликабельные ссылки внутри SVG при использовании Fancybox

Июнь 21, 2025 г.

Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете ...

Читать

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

Июль 6, 2018 г.

Рассмотрим как программно установить позицию скролла документа ровно в начале нужного вам HTML контейнера. Чтобы сделать переход плавно, можно использовать функцию jQuery().animate(). Суть процесса такова - вычисляем вертикальную позицию требуемого ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Фильтр только по нужному столбцу в Angular

Декабрь 3, 2016 г.

Продолжая тему работы с ng-repeat в Ангуляр фреймворк, хочу рассказать о том, как работать с кастомными фильтрами. Можно вернуться к примеру в прошлой ...

Читать
 

Комментарии к «Как избежать изменения позиции scroll в документе после установки #hash»

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



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