scroll down on click with animations

Question

I have html page. And I want to scroll down on button click ( button has class "s_down_button" ) with animation.

I need scroll screen on element_height + 20 pixels down.

element_height - height of element with "tp-bgimg" class

So I try:

jQuery(document).ready(function($) {

    $(".s_down_button").click(function(){
        var element_height = $(".tp-bgimg").height();
        var scroll_height = element_height +20;
        $('body').scrollTo(scroll_height);
    }); 

});

but I get an error:

Uncaught TypeError: $(...).scrollTo is not a function

Answer 1

$("html, body").animate({ scrollTop: scroll_height }, 600);

where 600 is time of animation in miliseconds. For more info look at animate jquery doc

Answer 2

The function you are looking for is:

$('body').animate({scrollTop: positionToScrollTo}, 500);

What I like to do is create a scrollTo function that calls this line of code:

function scrollTo(position) {
    $('body').animate({scrollTop: position}, 500);
}

Answer 3

This should work:

$(document).ready(function() {
    $(".s_down_button").click(function(){
        var element_height = $(".tp-bgimg").height();
        var scroll_height = element_height +20;
        $('body').animate({scrollTop: scroll_height }, 500);
    });
});

If your element is not on very top of the page you should add the offset:

var offsetOfElement = $(".tp-bgimg").offset().top;

So the variable scroll height is:

var scroll_height = element_height + offsetOfElement +20;