При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 6, 2017 г.
Я нашел некоторые особенности того примера, что я давал вчера. Потому я решил немного ещё поэкспериментировать, чтобы дать более качественное решение. ...
Читать
Апрель 7, 2025 г.
Плагин DataFilter позволяет управлять фильтрацией HTML тегов. Он является "родным" для CKE плагином, так что ничего дополнительно устанавливать не нужно. Рассмотрим как им можно управлять на уровне кастомного плагина.
Допустим, вы хотите разрешить ...
Читать
Май 9, 2023 г.
Когда требуется подсчитать количество не нулевых бит в числе, то следуют алгоритму: проверяют четность числа и смещают на каждой итерации на один разряд вправо, пока число не обратится в ноль. Есть и другой алгоритм, который обходится без цикла.
...
Читать
Сентябрь 17, 2019 г.
Полезное ноу-хау для тех кто пользуется jQuery. Функция $.each() производит перебор элементов по порядку, но иногда требуется выполнить операции в обратном порядке.
jQuery ничего не предлагает для реализации нашей задачи, но это и не требуется, ...
Читать