Smooth Scrolling for scrollIntoView();

Question

I have a radio button. When clicked upon, I make the page scroll to a div. That's working perfectly.

Here's the HTML for the Radio Button:

<input type="radio" id="tab" onclick="document.getElementById('mydivID').scrollIntoView();" name="tabs1" class="input">

The only thing I want more is for that scroll to be a smooth scroll. Is that possible?

Answer 1

document.getElementById('mydivID')
        .scrollIntoView({
            behavior: "smooth"
        });

Let me know how that goes

Answer 2

here's a solution that worked for me, first get the element you want to scroll your view to then apply a smooth behavior:

    const elm = document.getElementById(id)
    elm.scrollIntoView({ behavior: 'smooth' })

make sure to install this polyfill (npm package):

    # npm install smoothscroll-polyfill --save