Search code examples
javascriptscroll

window.scroll smooth not working on Safari

I'm using this to get a smooth scroll to a particular section when a user clicks on a button:

window.scroll({
  top: $(this).data('y'),
  left: 0,
  behavior: 'smooth'
});

This works great everywhere (including Android phones) but on Safari (desktop and iphone). In those cases it scrolls to the correct position but it isn't smooth, it's like it jumps.

I made a small demo on Codepen available here. Just click on the nav menu options and it will scroll there. This will be smooth on Chrome but not on Safari.

Is this not supported? (it doesn't seem to be the case looking at the doc) What are the supported options?

Thanks!

Solution

  • window.scroll is supported, but scroll-behavior CSS is not.

    https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

    Pending support, consider using the smoothscroll-polyfill which adds smooth scrolling support for Safari, IE, and Edge.