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

Question

I'm working on a single page portfolio which is navigated using a top-mounted navigation bar using href's. I use scroll-behavior: smooth; in my head's CSS and this makes the navigating smooth and pleasant to look at when looking at it in chrome. When loading the site using Safari this behavior is lost and the navigation is instant. Is there a Safari equivalent to this CSS functionality?

Answer 1

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

Answer 2

Safari 15.4 adds support for CSS scroll-behavior as detailed in the 15.4 release notes.

Added support for the CSS scroll-behavior property and ScrollOptions, allowing smooth scrolling to anchors or via JavaScript.

Answer 3

2022 Update

Safari support for smooth-scroll is still broken and not customizable.

If you're looking for a simple way to enable it, you can take a look at the API I've been building for the past 4 years: https://github.com/CristianDavideConte/universalSmoothScroll.

It's extremly fast, easy to use and it enables smooth-scroll on basically every browser (IE is not supported) with high customization degree (easing, duration, interruptibility, etc...).

Below you'll find an example of how to use the API to quickly enable smooth-scroll on your website:

Edit:

Since from UniversalSmoothScroll 6.0.0 the Ease-Functions library has been converted to a module, this answer has been updated to make it work on stackoverflow.
The problem is that stackoverflow doesn't support modules in the javascript section of snippets, so you'll find a workaround to make it work: you can ignore it since in a normal website you wouldn't use it.

/*
 * In this example we will only customize the document's scrolling,
 * but the API fully support every custom scrollable container
 */
function init() {
  /* 
   * We tell the API which element is the one that scrolls the document
   * (useful whenever it's something like the body element, a custom container,
   * a framework specific container, etc...)
   */
  uss.setPageScroller(window); 

  /** 
   * This API function, enables the anchors' 
   * smooth-scrolling to the corresponding section
   */
  uss.hrefSetup();  
  
  /**
   * This API function, sets the easing of the pageScroller (that we set to window) to a
   * medium speed(the "QUART" part) ease-in-out function that last exactly 1 second.
   */
   uss.setStepLengthCalculator(EASE_IN_OUT_QUART(1000)); 
   
   /**
    * This API function allow us to stop the scrolling on a container.
    * In this case, we don't want any more scrolling 
    * if the user scrolls the document with the mousewheel.
    */
    window.addEventListener(
          "wheel", 
          () => uss.stopScrolling(window) 
    ); 
}



/*
 * YOU CAN IGNORE THIS PART.
 * This is just part of the workaround used on stackoverflow to make modules work. 
 * Basically it loads the init function whenever the document is fully loaded and the module is imported.
 * Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
 */
document.addEventListener("readystatechange", () => document.readyState === "complete" && init());

/* Just styling, none of this is necessary for the API */
html, body {
  margin: 0;
}

nav {
  display: flex;
  justify-content: center;
  position: fixed;
  margin-top: 0;
  width: 100vw;
}

nav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  height: 20vh;
  width: 15vw;
  background: rgba(20,20,20,0.5);
  transition: all 0.3s;
}

nav > a:hover {
  background: rgba(20,20,20,0.6);
}

.horizontal-container {
  display:flex;
}

.page {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

#to1 {
  background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}


#to2 {
  background: linear-gradient(225deg, rgba(121,9,9,1) 0%, rgba(255,42,0,1) 100%);
}


#to3 {
  background: linear-gradient(45deg, rgba(227,176,7,1) 0%, rgba(255,239,0,1) 100%);
}


#to4 {
  background: linear-gradient(315deg, rgba(7,101,6,1) 0%, rgba(0,255,98,1) 100%);
}

<html>

  <head>
    <!-- We include the API -->
    <script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script>
    <!-- We include the API's easing library (this is optional) -->
    <script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js" type = "module"></script>
    
    <!-- 
      YOU CAN IGNORE THIS PART.
      This is just part of the workaround used on stackoverflow to make modules work.  
      It import the module and turns the import into a global variable.
      Check out this discussion for more informations: https://meta.stackoverflow.com/questions/389108/support-javascript-es6-modules-in-code-snippets
     -->
    <script type = "module">
      import {EASE_IN_OUT_QUART} from "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-ease-functions-min.js";
      window.EASE_IN_OUT_QUART = EASE_IN_OUT_QUART;
    </script>
  </head>


  <body>
    <nav> <!-- header -->
      <a href="#to1"><p>Blue</p></a>
      <a href="#to2"><p>Red</p></a>
      <a href="#to3"><p>Yellow</p></a>
      <a href="#to4"><p>Green</p></a>
    </nav>
    <!-- Website pages -->
    <div class="horizontal-container">
      <div id="to1" class="page"></div>
      <div id="to2" class="page"></div>
    </div>
    <div class="horizontal-container">
      <div id="to3" class="page"></div>
      <div id="to4" class="page"></div>
    </div>
  </body>

</html>

More usage examples can be found at: this answer and the official playground or my website.

Answer 4

According to the comment of elmcrest, it works.

<script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>

Answer 5

you can solve the problem like that:

jQuery('html, body').animate({
        scrollTop: $('html').offset().top
      }, 800)

Answer 6

Using jquery there is a equivalent for scroll-behavior: smooth.

Try this:

$('html, body').animate({
    scrollTop: 0
}, 1500);

Chanze zero to you desired postion.

Answer 7

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function (t) {
    if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
        var e = $(this.hash);
        e = e.length ? e : $("[name=" + this.hash.slice(1) + "]"), e.length && (t.preventDefault(), $("html, body").animate({
            scrollTop: e.offset().top
        }, 600, function () {
            var t = $(e);
            if (t.focus(), t.is(":focus")) return !1;
            t.attr("tabindex", "-1"), t.focus()
        }))
    }
});

Answer 8

Although it is stated here that safari supports scroll with smooth https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior but even example doesn't work on safari

As a way out, I found a library with a polyfills, and in those browsers where it does not work it's replaced - https://github.com/iamdustan/smoothscroll