При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Сентябрь 17, 2018 г.
Довольно часто картинка на странице показывается в масштабе, и при попытке определить её размеры из скрипта вы получите размер контейнера, а не самой картинки.
Разберемся как получать реальные размеры изображения.
В общем, нет особых хитростей. ...
Читать
Ноябрь 17, 2018 г.
Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()?
Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...
Читать
Июнь 10, 2025 г.
У нас есть окружность, заданная точкой её центра и радиусом. Еще у нас есть две точки, принадлежащие этой окружности - A и B, отсекая на окружности арку. ...
Читать
Январь 8, 2018 г.
Привычный в PHP и SQL тип данных timestamp отсутствует в javascript. Стоит ли говорить, что timestamp удобен для сравнения дат и для простых вычислений. Как получить его значение в JS?
В Javascript есть класс для работы с датами.
[crayon-69ccf8e73dba8543078010/] ...
Читать