Search code examples
javascriptscrollwindow

window.scroll does not work in Internet Explorer 11


I have the following code which works on all browsers besides on IE11. any idea what might be the issue?

function scrollIntoWarranty() {
  var offset = 50;
  var el = document.querySelector("#tr_tab_2");
  window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });
}
<a href="#" onclick="scrollIntoWarranty(); return false;">
  Go to warranty
</a>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div id="tr_tab_2">Warranty</div>


Solution

  • ScrollBehavior is not supported by IE

    Try this

    function scrollIntoWarranty() {
      var el = document.querySelector("#tr_tab_2");
      if ('scrollBehavior' in document.documentElement.style) { // behavior is not supported by IE
        var offset = 50;
        window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });
      } else {
        el.scrollIntoView();
      }
    }
    <a href="#" onclick="scrollIntoWarranty(); return false;">
      Go to warranty
    </a>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <div id="tr_tab_2">Warranty</div>