При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Июнь 18, 2023 г.
React компонент TextField библиотеки @mui/material - это сложный элемент и получить значение через свойство ref нельзя.
Разработчики понимали, что доступ к HTMLInputElement внутри компонента нужно предоставить, и потому реализовали свойство inputRef, ...
Читать
Май 9, 2023 г.
Когда требуется подсчитать количество не нулевых бит в числе, то следуют алгоритму: проверяют четность числа и смещают на каждой итерации на один разряд вправо, пока число не обратится в ноль. Есть и другой алгоритм, который обходится без цикла.
...
Читать
Декабрь 26, 2012 г.
Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами ...
Читать
Май 4, 2020 г.
Немного ванильного js, на этот раз: как найти контейнер по указанному классу.
Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent.
В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...
Читать