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 — allicarn
– allicarn, Commented Oct 13, 2015 at 18:14
if jQuery is not part of the question, OP should remove the tag. — allicarn
– allicarn, Commented Oct 13, 2015 at 18:22

Community · Accepted Answer · 2017-05-23 12:10:34Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Oct 13, 2015 at 18:13

nameless

1,5316 gold badges43 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gautham SK · Accepted Answer · 2015-12-14 12:00:55Z

0

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>

answered Dec 14, 2015 at 12:00

Gautham SK

691 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

html javascript smooth scroll

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related