SmoothScroll not working for Internet Explorer

Question

My smoothscroll script works fine with other browsers. But I can't seem to make it work on Internet Explorer. Any thoughts?

let anchorLinks = document.querySelectorAll('a[href^="#"]')
let headerHeight = $('header').outerHeight();
for (let item of anchorLinks) {
  item.addEventListener('click', (e) => {
    let hashVal = item.getAttribute('href')
    let topOfElement = document.querySelector(hashVal).offsetTop - headerHeight

    window.scroll({ top: topOfElement, behavior: "smooth" })
    history.pushState(null, null, hashVal)
    e.preventDefault()
  })
}

https://caniuse.com/#feat=element-scroll-methods `window.scroll` is not available in IE. — Lionel Rowe, Aug 18 '20 at 21:23
See [How to smoothly scroll to an element in pure javascript](https://stackoverflow.com/q/51689653/9513184) — Unmitigated, Aug 18 '20 at 21:30

score 0 · Answer 1 · answered Aug 18 '20 at 21:31

You can apply jQuery.animate on the scrollTop of the HTML and body elements.

let anchorLinks = document.querySelectorAll('a[href^="#"]')
let headerHeight = $('header').outerHeight();
for (let item of anchorLinks) {
  item.addEventListener('click', (e) => {
    let hashVal = item.getAttribute('href')
    let topOfElement = document.querySelector(hashVal).offsetTop - headerHeight
    $('html, body').animate({
       scrollTop: topOfElement
    }, 500);
    history.pushState(null, null, hashVal)
    e.preventDefault()
  })
}

SmoothScroll not working for Internet Explorer

1 Answers1