jquery animate speed not changing

Question

I am using a button click event to scroll down a whole page. As I changed the duration parameter of jquery animate() function, the speed didn't seem to change. What did I do wrong?

Here is my code:

    $("#arrowdown").click (function(){
        $("html, body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

Answer 1

I wrote some code very similar to this a while back, and while you didn't say the #arrowdown item was a link, I'm betting it is and its pointing to #second-page (href = '#second-page') which if that's the case its jumping right down the page, no animation at all.

Try this:

$("#arrowdown").click (function(e){
    e.preventDefault();
    $("html, body").animate(
    {
        scrollTop: $("#second-page").offset().top
    }, 
    1000
    );
})

The big changes are the function(e) and e.preventDefault(); which will prevent the default action from overriding what you want to happen.

Answer 2

Ok One reason maybe your text is not long enough, I have proramatically assigned a select dropdown select a speed and then click down arrow it takes up the speed as desired

 $('select').on('change', function(){ $("html, body").scrollTop(0); var v = parseInt($(this).val()); $("#arrowdown").off('click').on('click', function(){ $("html,body").animate( {'scrollTop': $("#second-page").offset().top}, v ); }); }).trigger('change'); //just to make text long //ignore var x = $('div.dum').text(); for(var i=0; i<5; i++){ x+=x; }$('div.dum').text(x) 

 #botton{ width:200px;height:40px; background:#ccc; position:fixed; bottom:0; right:0; padding:5px; } #botton > Button, #botton > select{float:left;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=dum> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div> <span id="second-page">Hello second</span> <div id=botton> Select a speed in seconds<select> <option value=100>100</option> <option value=500>500</option> <option value=1000>1000</option> <option value=2000>2000</option> </select> <button id="arrowdown">Click Down Arrow</button> </div> 

Answer 3

100=0.1 second, try 811 and/or {scrollTop:$(document).height()}

$("#arrowdown").click (function(){
    $("html, body").animate(
    {
        scrollTop:$(document).height()
    }, 
    811
    );
})

Answer 4

try below code -

$("#arrowdown").click (function(){
        $("html body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

You dont neet to put comma between html body .