Плавный переход к якорной ссылке с других страниц?

Question

[Леонид]

На странице сайта есть меню для перехода к разным частям страницы и реализована плавная прокрутка (с учетом высоты sticky-шапки страницы ):

jQuery( document ).ready(function() {
  jQuery('a[href*="#"]').bind("click", function(e) {
    var anchor = jQuery(this);
    jQuery('html, body').stop().animate({
      scrollTop: jQuery(anchor.attr('href')).offset().top-100
    }, 1000);
    e.preventDefault();
  });
});

Как сделать так чтобы при переходе с других страниц по ссылке содержащей якорь - плавная прокрутка так же бы работала? (например при клике на ссылку https://сайт/page.html#h234 чтобы была плавная прокрутка )

Comments

[Ankhena]

В рамках одной страницы я понимаю зачем плавность.

А вот зачем смотреть на этот медленный скролл, открывая новую страницу, это загадка.

[Леонид]

Ankhena, медленный скрол не такая большая проблема - проблема это перекрывающая sticky-шапка сайта, браузер по умолчанию скролит до элемента ровно в top - а мне нужно чуть спустить ( скрольнуть вниз ) иначе пользователь не увидит элемент к которому он перешел - он спрячется за stiky-шапкой

[Ankhena]

Леонид, я это делаю с помощью псевдоэлементов на высоту шапки и таким же отрицательным margin.
Высота шапки получается на js и передается в кастомное свойство.

.your-section::before {
    content: "";
    display: block;
    height: var(--header-height);
    margin-top: calc(0px - var(--header-height));
    pointer-events: none;

[Леонид]

.your-section - это шапка?
--header-height - переменная которая определяется в javascript ?

[Леонид]

на stackoverflow нашел такой финт, удивительно но по крайней мере в Chrome успешно работает:

html {
  scroll-padding-top: 100px;
}

[Ankhena]

Леонид, осталось проверить в сафари 14-. На реальном устройстве.

[Леонид]

Ankhena, в моей версии работает, про реальное устройство не понял вас

[Леонид]

Ankhena, в любом случае хотелось бы увидеть полный пример css+javascript, пока не нахожу - может на так ищу, не подскажите?

[Ankhena]

Леонид, ваша версия 14.1,а должна быть 14 и ниже

https://caniuse.com/?search=scroll-padding-top

[Ankhena]

Леонид,

в любом случае хотелось бы увидеть полный пример css+javascript

С телефона мало удобно.

Получаете высоту шапки.
Задаете полученное в кастомное свойство для, например, body через style.setProperty

Дальше в стилях используете. Я выше написала как.

[Леонид]

Ankhena, да это я уже понял )

[Danny Arty]

проверять на наличие якоря в url и тогда скроллить к элементу

Answer 1

[Danny Arty]

Можно проверить url на наличие hash, далее проверяем наличие элемента на странице и потом скроллим:

if(window.location.hash) {
  var hash = window.location.hash.substring(1);
  if ($('#'+hash).length) {
    $('html, body').stop().animate({
      scrollTop: $('#'+hash).offset().top-100
    }, 1000);
  }
}