При установке значения 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, 2016 г.
Если вы начали применять вложенные циклы ng_repeat, но не сильно вникали как это работает, то могли столкнуться с проблемой видимости итератора внешнего цикла во внутреннем.
В контексте цикла Angular создает несколько переменных, одна из них - ...
Читать
Июль 13, 2021 г.
Культовая игра "жизнь", теперь и на js. Давным давно я делал реализацию игры на delphi (в 1999?). Хотя старая реализация до сих пор рабочая, но запустить ...
Читать
Май 3, 2017 г.
Веб-программирование - почти всегда это создание кода, с использованием нескольких языков программирования. Зная одни языки, вы ищите знакомые аналоги там, где не так твердо стоите на ногах.
Есть ли в javascript оператор цикла foreach (аналог в PHP)? ...
Читать
Май 13, 2022 г.
С тех пор как стало возможным указать загружаемому в HTML документе скрипту флаги-аттрибуты async и defer, стало необходимо понимать то, в какой очередности скрипты будут исполнены, если они зависят друг от друга.
Так если ваш скрипт зависит от ...
Читать