При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Декабрь 26, 2012 г.
Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами ...
Читать
Октябрь 14, 2017 г.
Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов.
Плагины позволяют подставить в бекграунд ...
Читать
Январь 8, 2018 г.
Привычный в PHP и SQL тип данных timestamp отсутствует в javascript. Стоит ли говорить, что timestamp удобен для сравнения дат и для простых вычислений. Как получить его значение в JS?
В Javascript есть класс для работы с датами.
[crayon-68b080f006cd7926162770/] ...
Читать
Апрель 7, 2025 г.
Плагин DataFilter позволяет управлять фильтрацией HTML тегов. Он является "родным" для CKE плагином, так что ничего дополнительно устанавливать не нужно. Рассмотрим как им можно управлять на уровне кастомного плагина.
Допустим, вы хотите разрешить ...
Читать