How can I smooth scroll on Safari when clicked?

Question

I have this in my navbar:

<li class="nav-item">
  <a class="nav-link" href="/#frase">¿Como funciona?</a>
</li>

I want to make the page scroll down slowly to the href. Now it's scrolling abruptly on Safari. For google chrome I have this and works fine:

<style>
  html{
    scroll-behavior: smooth;
  }
</style>

I've tried implementing smooth scroll for safari using Javascript from another stack overflow questions but none of them worked. Thanks in advance.

Does this answer your question? [Is there a Safari equivalent for scroll-behavior: smooth;?](https://stackoverflow.com/questions/56011205/is-there-a-safari-equivalent-for-scroll-behavior-smooth) — Henry Woody, Nov 30 '22 at 23:53
Another dupe target option: [Smooth scrolling when clicking an anchor link](https://stackoverflow.com/q/7717527/8068625) — Henry Woody, Dec 01 '22 at 00:04

score 0 · Answer 1 · answered May 12 '20 at 18:25

0

You could use this script to enable smooth scrolling with backwards compatibility.

https://github.com/cferdinandi/smooth-scroll

Also, change your href to href="#frase" the / is not needed.

answered May 12 '20 at 18:25

Matt

71
1
2
7

This may not be a great option as it's since been deprecated. – Justin Hammond Mar 13 '22 at 07:30

score 0 · Accepted Answer · edited Aug 30 '21 at 16:51

Safari does not support scroll-behavior: smooth;

To implement smooth scrolling for internal anchor links, add the following slice of vanilla JavaScript (no jQuery required!):

(function() {
    scrollTo();
})();

function scrollTo() {
    const links = document.querySelectorAll('.scroll');
    links.forEach(each => (each.onclick = scrollAnchors));
}

function scrollAnchors(e, respond = null) {
    const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);
    e.preventDefault();
    var targetID = (respond) ? respond.getAttribute('href') : this.getAttribute('href');
    const targetAnchor = document.querySelector(targetID);
    if (!targetAnchor) return;
    const originalTop = distanceToTop(targetAnchor);
    window.scrollBy({ top: originalTop, left: 0, behavior: 'smooth' });
    const checkIfDone = setInterval(function() {
        const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
        if (distanceToTop(targetAnchor) === 0 || atBottom) {
            targetAnchor.tabIndex = '-1';
            targetAnchor.focus();
            window.history.pushState('', '', targetID);
            clearInterval(checkIfDone);
        }
    }, 100);
}

After including that code snippet, any anchor link with a class of .scroll will scroll to the target. No modifications are required, just drop it in.

Since you have used the class .nav-link for <a> tag you can replace scroll in the first line of the scrollTo() function to your anchor class name which is .nav-link.

Official source of answer

also do check whether you href is working fine?

that code no longer works it seems. how exactly does jquery animate scrolling, any idea? — oldboy, Nov 10 '20 at 08:12
@oldboy you can find alternative solution of this problem here: https://stackoverflow.com/questions/51229742/javascript-window-scroll-behavior-smooth-not-working-in-safari — Fareed Khan, Nov 11 '20 at 10:01
that solution does not have the best functionality, but its def a solution nonetheless. i wonder how jquery achieves it — oldboy, Nov 11 '20 at 22:07
@oldboy for jquery you can see this: https://www.lambdatest.com/blog/browser-compatible-smooth-scrolling-with-css-js-jquery/ — Fareed Khan, Nov 12 '20 at 03:43
i believe jquery must use JS `animate` because that is the only way ive come across that creates a truly smooth scroll that can be throttled at diff rates — oldboy, Nov 12 '20 at 05:41

How can I smooth scroll on Safari when clicked?

2 Answers2