Question

I’m about to create a side, where it will scroll very smooth and slowly down, so that you have enough time to read whats on the page. However, I’m looking for a way to change the speed during the animation with jQuery.

What I would like, is 2 buttons, one where you speed up the animation scroll, and another where you slow down. Does any of you have a method to do this?

This is my code:

$(document).ready(function() {

    $('a[href^="#"]').click(function(event) {

        var id = $(this).attr("href");

        var offset = 60;

        var target = $(id).offset().top - offset;

        $('html, body').animate({scrollTop:target}, 10000, 0, function(){
            //$('footer, header').unbind('click');
            //$('html, body').stop();
        });

        event.preventDefault();
    });
    $('#pause').click(function(e){
                $('html, body').stop();
                console.log("test");
        });

});

Answer 1

This should be quite easy. When the button is clicked, just stop() the existing animation and restart it using different speed parameters by making a new call to the animate() method.

For example, you could have button listeners like this (pseudocode):

$('speedUp').click(function(e){
    $('animatedElement').stop(); //don't clear or remove, just leave it where it stopped
    $('animatedElement').animate(properties [, duration] [, easing] [, complete] ); //faster settings
}
$('slowDown').click(function(e){
    $('animatedElement').stop(); //don't clear or remove, just leave it where it stopped
    $('animatedElement').animate(properties [, duration] [, easing] [, complete] ); //slower settings
}

Hopefully the transition would not be choppy, but even if you have a blip of no movement during the transition, it shouldn’t startle the user since they know they just changed the speed. If it was visually annoying, you could even divert attention from the transition by momentarily highlighting the button and quickly fading out the highlight.