При установке значения 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Март 20, 2025 г.
Делюсь примером кода, для создания обертки в модели экосистемы CKEditor 5.
Здесь есть несколько нюансов.
Во-первых, нужно проверить, являются ли оборачиваемые элементы валидными по отношению к обертке, в которую мы их помещаем. У CKE элементов ...
Читать
Август 5, 2018 г.
Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js.
Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...
Читать
Май 4, 2020 г.
Немного ванильного js, на этот раз: как найти контейнер по указанному классу.
Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent.
В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...
Читать
Октябрь 19, 2015 г.
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. ...
Читать