title: How to do a smooth scrollTo (or equivalent) on Safari?
body: <p>I have a simple app that I need to have a smooth scroll up a certain page.</p>
  <p>This works all fine and well on Chrome, but on Safari I get an abrupt jump back to the top when I need a smooth scroll transition.</p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#browser_compatibility" rel="nofollow noreferrer">According to the MDN documentation</a> the <code>scrollTo</code> with options indeed is not available for Safari. Since this is the case, how could I get this equivalent effect to work for it?</p>
  <p>Here is a sample app of what I currently have using just a simple <code>.scrollTo([options])</code> call.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App = () =&gt; {
    const scrollUp = () =&gt; {
      const scroll = document.getElementsByClassName("wrapper");
      scroll[0].scrollTo({
        top: 0,
        behavior: "smooth"
      });
    };
  
    return (
    &lt;div className = "wrapper"
      style = {
        {
          height: 300,
          overflowY: "scroll"
        }
      }&gt;
      &lt;h1&gt; Scroll all the way down to see the scroll up button &lt;/h1&gt;
      &lt;p&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. &lt;/p&gt;
      &lt;p&gt;
      Dui id ornare arcu odio ut.Tempus iaculis urna id volutpat lacus laoreet non curabitur.Nullam vehicula ipsum a arcu cursus vitae congue mauris.Etiam tempor orci eu lobortis elementum nibh tellus molestie.Et malesuada fames ac turpis egestas.Placerat vestibulum lectus mauris ultrices eros.Pharetra magna ac placerat vestibulum.Facilisis volutpat est velit egestas dui id ornare arcu odio.Consequat id porta nibh venenatis cras sed felis.Tincidunt lobortis feugiat vivamus at augue eget arcu dictum.Turpis egestas sed tempus urna et pharetra.Quis imperdiet massa tincidunt nunc.Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. &lt;/p&gt;
      &lt;p&gt;
      Tellus at urna condimentum mattis.Massa sapien faucibus et molestie ac feugiat sed lectus.Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.Ac odio tempor orci dapibus.Enim nulla aliquet porttitor lacus luctus accumsan tortor.Vitae proin sagittis nisl rhoncus mattis rhoncus.Mi proin sed libero enim.Cursus eget nunc scelerisque viverra.Id diam vel quam elementum.Nulla aliquet enim tortor at.Morbi tincidunt ornare massa eget egestas purus viverra accumsan.Suscipit tellus mauris a diam maecenas.Purus sit amet luctus venenatis lectus magna fringilla.Aliquet bibendum enim facilisis gravida neque convallis. &lt;/p&gt;
      &lt;p&gt;
      Vel eros donec ac odio tempor orci.In aliquam sem fringilla ut morbi tincidunt augue interdum.Placerat duis ultricies lacus sed turpis tincidunt id aliquet risus.Ac orci phasellus egestas tellus rutrum tellus.In metus vulputate eu scelerisque felis imperdiet proin fermentum leo.Duis at tellus at urna condimentum.Enim diam vulputate ut pharetra sit amet aliquam.Lectus quam id leo in vitae.Elementum sagittis vitae et leo duis ut diam quam.Blandit aliquam etiam erat velit scelerisque in dictum non.Interdum velit laoreet id donec ultrices tincidunt arcu non sodales.Pulvinar proin gravida hendrerit lectus.Mauris cursus mattis molestie a iaculis at.Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.Montes nascetur ridiculus mus mauris vitae.Amet nulla facilisi morbi tempus iaculis urna id volutpat. &lt;/p&gt;
      &lt;p&gt;
      In nisl nisi scelerisque eu.Elit ut aliquam purus sit amet luctus.Et ultrices neque ornare aenean euismod elementum.A condimentum vitae sapien pellentesque habitant morbi.Neque viverra justo nec ultrices dui.Cras pulvinar mattis nunc sed blandit.Nunc sed augue lacus viverra vitae congue eu consequat ac.Pharetra vel turpis nunc eget lorem dolor sed.Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc.Tincidunt augue interdum velit euismod in pellentesque massa. &lt;/p&gt;
  
      &lt;p&gt;
      Vitae congue eu consequat ac felis donec et odio pellentesque.Nunc non blandit massa enim nec.Enim neque volutpat ac tincidunt.Elementum integer enim neque volutpat.Amet venenatis urna cursus eget nunc scelerisque viverra.Sollicitudin tempor id eu nisl nunc mi ipsum faucibus.Orci a scelerisque purus semper eget duis at tellus.Integer eget aliquet nibh praesent tristique magna sit.Congue quisque egestas diam in arcu cursus euismod quis.Justo donec enim diam vulputate ut pharetra sit amet aliquam.Aliquam ut porttitor leo a.Libero volutpat sed cras ornare arcu. &lt;/p&gt;
  
      &lt;p&gt;
      Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus.Imperdiet massa tincidunt nunc pulvinar sapien.Volutpat sed cras ornare arcu dui vivamus arcu.Scelerisque purus semper eget duis at tellus at urna condimentum.Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.Sit amet consectetur adipiscing elit.Sit amet porttitor eget dolor morbi.Morbi enim nunc faucibus a pellentesque sit amet porttitor eget.Et netus et malesuada fames ac turpis egestas integer.Tristique senectus et netus et.Placerat in egestas erat imperdiet sed euismod.Tortor at risus viverra adipiscing at in tellus integer feugiat.Nibh mauris cursus mattis molestie a iaculis at.Enim ut sem viverra aliquet eget sit amet tellus.Lectus urna duis convallis convallis tellus id interdum velit laoreet.Ornare quam viverra orci sagittis eu volutpat odio.Eget gravida cum sociis natoque penatibus. &lt;/p&gt;
  
      &lt;p&gt;
      Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra.Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar.Magna ac placerat vestibulum lectus mauris ultrices eros.Sed sed risus pretium quam vulputate.Arcu risus quis varius quam quisque id diam vel quam.Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis.Suspendisse faucibus interdum posuere lorem.Massa vitae tortor condimentum lacinia quis.Maecenas ultricies mi eget mauris pharetra.Praesent tristique magna sit amet.Lacus sed turpis tincidunt id aliquet risus.Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.Neque convallis a cras semper auctor neque vitae tempus quam. &lt;/p&gt;
      
      &lt;button onClick={() =&gt; scrollUp()}&gt; Scroll up &lt;/button&gt;
  &lt;/div&gt;
    );
  }
  
  
  ReactDOM.render(&lt;App/&gt; ,
    document.getElementById('app')
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>