При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Февраль 3, 2017 г.
Это еще одна из функций-хелперов. На этот раз мы пытаемся прочитать введенное пользователем число средствами javascript.
Javascript уже имеет довольно не плохую функцию parseFloat(strValue). Но она обладает некоторыми особенностями. В частности, ...
Читать
Май 13, 2022 г.
С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.
Так если ваш скрипт зависит от ...
Читать
Ноябрь 17, 2018 г.
Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()?
Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...
Читать
Июнь 21, 2025 г.
Когда вы используете Fancybox для отображения изображений, SVG и других медиа-объектов, возникает интересная проблема: если внутри SVG находятся ссылки (<a>), они перестают работать. Почему? Потому что Fancybox «перехватывает» клик, и вы не попадаете ...
Читать