Window.Scroll Smooth Not Working on Safari

JavaScript - window.scroll({ behavior: 'smooth' }) not working in Safari

Behavior options aren't fully supported in IE/Edge/Safari, so you'd have to implement something on your own. I believe jQuery has something already, but if you're not using jQuery, here's a pure JavaScript implementation:

function SmoothVerticalScrolling(e, time, where) {
    var eTop = e.getBoundingClientRect().top;
    var eAmt = eTop / 100;
    var curTime = 0;
    while (curTime <= time) {
        window.setTimeout(SVS_B, curTime, eAmt, where);
        curTime += time / 100;
    }
}

function SVS_B(eAmt, where) {
    if(where == "center" || where == "")
        window.scrollBy(0, eAmt / 2);
    if (where == "top")
        window.scrollBy(0, eAmt);
}

And if you need horizontal scrolling:

function SmoothHorizontalScrolling(e, time, amount, start) {
    var eAmt = amount / 100;
    var curTime = 0;
    var scrollCounter = 0;
    while (curTime <= time) {
        window.setTimeout(SHS_B, curTime, e, scrollCounter, eAmt, start);
        curTime += time / 100;
        scrollCounter++;
    }
}

function SHS_B(e, sc, eAmt, start) {
    e.scrollLeft = (eAmt * sc) + start;
}

And an example call is:

SmoothVerticalScrolling(myelement, 275, "center");

Is there a Safari equivalent for scroll-behavior: smooth;?

Safari does not support scroll-behavior: smooth, you'll need some custom javascript to achieve the same effect. See this: Javascript - window.scroll({ behavior: 'smooth' }) not working in Safari

element.scrollTo smooth scrolling not working in Safari in snappable scrollable container

This behavior is apparently possible, but behind a flag. I'm confused though by what is mentioned at Can I Use about scrollTo.

This is the info I found at WebKit
http://bugs.webkit.org/show_bug.cgi?id=188043

In the end, I used the 'smoothscroll-polyfill' polyfill that I dynamically import. (https://github.com/iamdustan/smoothscroll) :(

if (!('scrollBehavior' in document.documentElement.style)) {
    import('smoothscroll-polyfill').then((module) => {
        module.polyfill();
    }).then(() => {
        ...
    });
}

How can I smooth scroll on Safari when <a> clicked?

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?

How to enable smooth scrolling on mobile iOs?

Unfortunately Smooth Scrolling is not possible in Safari on OSX and iOS natively. But there are some JavaScript polyfills for that. For example: https://github.com/iamdustan/smoothscroll
You have to initialize it with JavaScript, not with CSS.

---

Related Topics