html javascript smooth scroll

Question

How to smooth scroll using JavaScript? I want to Smooth Scroll Down To Div Can anyone know how to add smooth scroll in the JavaScript code below

function scroll_to(val) {
 if(val== "Scroll down to div id")  
    document.getElementById('divid11').scrollIntoView();
}

<select onchange="scroll_to(this.value);">
<option>1111111</option>
<option>2222222</option>
<option >Scroll down to div id</option>
<option>4444444</option>
<option>5555555</option>
<option>6666666</option>
</select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id='divid11'>scroll</div>

Possible duplicate of [JQuery smooth scrolling when clicking an anchor link](http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link) — allicarn, Oct 13 '15 at 18:14
if jQuery is not part of the question, OP should remove the tag. — allicarn, Oct 13 '15 at 18:22
Possible duplicate of [javascript smooth scrolling down a page](http://stackoverflow.com/questions/29716730/javascript-smooth-scrolling-down-a-page) — cuadraman, Oct 13 '15 at 19:59

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

This is in general already answered here. So using JQuerys .animate function in combination of ScrollTop will do the trick for you.

For doing this without JQuery you can follow this tutorial.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 13 '15 at 18:13

nameless

1,483
5
32
78

score 0 · Answer 2 · answered Dec 14 '15 at 12:00

Use this script in your body for smooth scroll.

<script type="text/javascript">
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>

html javascript smooth scroll

2 Answers2