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

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

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

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

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

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

CKE5 функция создания контейнера-обертки в модели

Март 20, 2025 г.

Делюсь примером кода, для создания обертки в модели экосистемы CKEditor 5. Здесь есть несколько нюансов. Во-первых, нужно проверить, являются ли оборачиваемые элементы валидными по отношению к обертке, в которую мы их помещаем. У CKE элементов ...

Читать

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ...

Читать

Как перезагрузить страницу из js

Сентябрь 20, 2018 г.

Наиболее широко встречается следующий способ: [crayon-6a9d90740b16b665937647/] Он инициирует setter локации, заставляя браузер выполнить переход на указанную страницу. Не все браузеры поддаются на данную уловку. Если не указать отличное от прежнего ...

Читать

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

Подбирал плагин, реализующий компонент для выбора диапазона чисел. Перебрал не мало "добра", были и некоторые довольно свежие плагины, но остановил свой ...

Читать
 

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

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



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