JavaScript Smooth Scrolling effect with scrollIntoView

Question

Okay, I am attempting to get a single page (two divs), Primarily a splash screen, which when you click 'Enter site' and it will scroll down smoothly to the 'main site', However it jumps to it, rather than smooth scrolling to the element.

How would can I get it to scroll to that element smoothly without this jump effect?

Here is my a snippet:

If you click the button it will jump to the next div, but i need it to scroll smoothly rather than jump to the next div, Using pure javascript, everywhere else i have looked seems to have plug ins or uses jquery.

Answer 1

If you don't want a straight jump, you should animate the scroll somehow.
With the help of jQuery is easy as that:

$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);

Look at this fiddle: https://jsfiddle.net/8501ckvn/

---

jQuery solves a lot of cross browser issues, but if you are looking for a pure javascript solution there are already many answers on Stackoverflow, i.e. look at Smooth scroll anchor links WITHOUT jQuery.