При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Май 13, 2022 г.
С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.
Так если ваш скрипт зависит от ...
Читать
Сентябрь 19, 2018 г.
JavaScript в web был когда то всего лишь приятным дополнением. А сейчас сложно найти сайт, который не использует скрипты.
А если уж часть шаблона формируется скриптом, то без много-строчных констант не обойтись. Но в javascript с ними не так все ...
Читать
Апрель 5, 2025 г.
Делюсь еще одним лайфхаков, как в плагине CKE5 вставить htmlentity.
При вставке текста в модель, CKEditor будет преобразовывать html символы вроде '&' и '>'. Но что делать, если нужно вставить символ в виде html кода?
Рассмотрим следующий ...
Читать
Апрель 9, 2024 г.
Слайдер классный, а вот документация какая то вялая.
Сначала нужно найти DOM элемент, куда подключен slick, а потом получить объект слайдера, в котором можно прочитать множество свойств, в том числе и число слайдов:
[crayon-69729e53761b5165480948/]
Читать