How to use button to scroll smoothly to a different part of the webpage? (Preferably without jQuery, Bootstrap etc.)

Question

I've been trying have a button so that when clicked, it will move to another part of the page. As of now, I've used:

button onClick="document.getElementById('one').scrollIntoView();"

with the <> of course. However rather than sliding smoothly, it jumped straight to it.

I was wondering if there was anyway to do so with either HTML, CSS or Javascript?

Possible duplicate of [How to scroll HTML page to given anchor?](https://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor) — Dhaust, Sep 10 '18 at 23:41
The answer is already here on StackOverflow. Check https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link — Abdulla, Sep 10 '18 at 23:57

score 0 · Answer 1 · answered Sep 10 '18 at 23:55

0

document.querySelector('.one').scrollIntoView({ 
    behavior: 'smooth' 
});

so in your case. let's try

onClick="document.getElementById('one').scrollIntoView({ 
    behavior: 'smooth' 
});"

answered Sep 10 '18 at 23:55

1 Answers1