Anime: Scroll document to element?

[jackedgson]

Is it possible to have something like the following:

const offset = element.getBoundingClientRect().top;
anime({
    target: document,
    scrollTop: offset,
    duration: 1000
});

The idea being we can scroll to the element using some kind of easing function.

[acemir]

Yes, but the document itself do not have the scrollTop property. You may want to animate document.documentElement and document.body.

const offset = element.getBoundingClientRect().top;
anime({
    targets: [document.documentElement, document.body],
    scrollTop: offset,
    duration: 1000
});

[jimblue]

Here is an other solution including scrolling position.

const scrollTo = element => {
  const elementSelector = document.querySelector(element)

  document.querySelector('.btn-scroll').addEventListener('click', () => {
    const elementOffset = elementSelector.getBoundingClientRect().top
    const scrollPosition = window.scrollY
    const documentTop = document.documentElement.clientTop
    const scrollOffset = elementOffset + scrollPosition - documentTop

    anime({
      targets: [document.documentElement, document.body],
      scrollTop: scrollOffset,
      duration: 800,
      easing: 'easeInOutQuad'
    })
  })
}

[Splendorr]

@jimblue This was helpful! Thanks.