efekt płynnego przewijania strony po kliknięcu na odnośnik

Znam 2 sposoby na osiągnięcie efektu płynnego przewinięcia strony w górę lub w dół.

Poziom HTML:

<a href="#tag">tekst</a>

Poziom JS:

.scrollIntoView({behavior: "smooth"})

Pytanie który jest lepszy i jakie są jeszcze inne możliwości?

href="#tag" niekoniecznie przewinie płynnie, c'nie? Wydaje mi się, że u mnie kotwice dają insta-skok (i słusznie zresztą :-P).

Jeśli chcemy z tego korzystać na całej stronie to możemy ustawić

html {
  scroll-behavior: smooth;
}

Wtedy działa to zarówno przy

<a href="#tag">tekst</a>

jak i

element.scrollIntoView()

EDIT:
Sposób działa, o ile nie zostanie to wyłączone przez ustawienia przeglądarki chrome://flags/#smooth-scrolling ale to pewnie jakieś znikome przypadki.

A jak do tego mają się frameworki? Bo za ich pomocą analogiczny efekt również można uzyskać.

kosmonauta80 napisał(a):

A jak do tego mają się frameworki? Bo za ich pomocą analogiczny efekt również można uzyskać.

Możesz podać jakiś przykład?

Bo załóżmy, że masz jakąś bibliotekę / framework, który udostępnia funkcję smoothScroll to musi ona zostać zrobiona na podobnych zasadach i bazować na zwykłym JavaScripcie.

const smoothScroll = (element) => {
  element.scrollIntoView({ behavior: "smooth" });
}

Może też być na metodzie np window.scrollTo, ale z tym trochę więcej zabawy https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

scroll-behavior: smooth;
jest to wciąż uzależnione od ustawień przeglądarki: chrome://flags/#smooth-scrolling
Niestety chcąc mieć 100% pewności we wszystkich przeglądarkach wciąż trzeba się wesprzeć JavaScript'em.