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

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

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

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

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

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

Меняем поведение корневого пункта меню bootstrap dropdown

Апрель 14, 2022 г.

В bootstrap корневой пункт меню с подпунктами (dropdown menu) не является активной ссылкой и лишь служит кнопкой для развертывания подпунктов. Тем временем ...

Читать

Ошибка в Drupal: once is not a function

Май 8, 2023 г.

В Drupal 9/10 нет jQuery плагина once(), потому при использовании этой функции вы увидите сообщение о том, что once - не является функцией. Плагин удобен, но его не сложно заменить в коде буквально парой вставок. Он работает по следующему алгоритму ...

Читать

Как определить загружен ли определенный плагин для jQuery

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

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

Манипуляции с битами в JS

Май 12, 2023 г.

Рассмотрим три операции - установка нужного бита в числе, сброс бита и инверсия. У нас есть число N и номер бита i. Номер бита нумерует биты, начиная с нуля. Прежде всего нам понадобится маска, с помощью которой мы произведем нужную нам операцию. ...

Читать
 

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

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



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