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

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?

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

According to the comment of elmcrest, it works.

<script defer src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"></script>

2021 Update

Safari still doesn't support smooth-scroll but 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 3 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 at the moment) 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:

/*
 * 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 version would prevent the stop-and-go effect you have when 
   * you click the same anchor more than one time.
   */
  //uss.hrefSetup(null, null, () => {return !uss.isScrolling();});
  
  /**
   * 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() 
    ); 
}

/* 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"></script>
  </head>


  <body onload="init()"> <!-- Better to call JS when the elements are loaded -->
    <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: myWebPage and thisDemo or thisAnswer.

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

2021 Update

Related

Recent Posts