Почему не работает плавная прокрутка к якорю в Safari?

Question

[Alexander]

Подскажите пожалуйста почему не работает плавная прокрутка ссылок к якорю в Safari?
Буду благодарен за помощь

const anchors = document.querySelectorAll('a[href*="#"]');

  for (let anchor of anchors) {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      burger.classList.remove("header-burger--active");
      document.body.classList.remove("active");
      menu.classList.remove("active");
      const blockID = anchor.getAttribute("href").substr(1);
      document.getElementById(blockID).scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    });
  }

Answer 1

[Вадим]

Потому что safari новый ИЕ не поддерживает параметры для scrollIntoView.
https://developer.mozilla.org/ru/docs/Web/API/Elem... - scrollIntoViewOptions

Как сделать плавный якорный scroll для safari ios?

iamdustan.com/smoothscroll
https://jonaskuske.github.io/smoothscroll-anchor-p...

Comments

[Alexander]

И как это можно пофиксить?

[Вадим]

Alexander, переписать реализацию, очевидно :-)
Либо смотреть в сторону window.scrollTo() там тоже есть опции для плавной прокрутки, только не знаю поддерживаются они в сафари или нет, либо через какой-нибудь requestAnimationFrame устанавливать скролл вручную до нужного элемента.

[Вадим]

Alexander, ну и ещё есть полифилы для плавного скролинга. Например такой https://github.com/iamdustan/smoothscroll

[Вадим]

Alexander,

, только не знаю поддерживаются они в сафари или нет,

проверил, не поддерживается

[Вадим]

Alexander, Как сделать плавный якорный scroll для safari ios?

[Alexander]

Вадим, незнаю почему но сделал вот так

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

и все тоже самое

[Вадим]

Alexander, "И все тоже самое" - что Вы имеете в виду?

[Alexander]

Вадим, не работает, при клике на ссылку происходит резкое движение вниз без анимации в safari, а в остальных браузерах все работает отлично. Может тут делаю что-то не так?

const anchors = document.querySelectorAll('a[href*="#"]');

  for (let anchor of anchors) {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      burger.classList.remove("header-burger--active");
      document.body.classList.remove("active");
      menu.classList.remove("active");
      const blockID = anchor.getAttribute("href").substr(1);
      const element = document.getElementById(blockID);
      const topPos = element.getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({
        top: topPos,
        behavior: "smooth",
      });
    });
  }

[Вадим]

Alexander, я же написал выше что проверил, опции для плавной прокрутки window.scrolTo в сафари тоже не поддерживаются. Там лайк стоит. Думал Ваш.
Чтобы заработало в сафари - посмотрите этот полифил iamdustan.com/smoothscroll

[Alexander]

Вадим, я думал Вы о полифиле писали, теперь все прекрасно работает, спасибо большое