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

Of course, `scrollTo` is not a jQuery method. See here how to do this properly: https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation (finding that yourself should have been trivial btw., if you did some basic research.) — CBroe, Aug 28 '17 at 14:51
there are countless jQuery plugins for that... and also countless questions here regarding this subject. bothered google? — vsync, Aug 28 '17 at 14:52
Here you go, my [own gist](https://gist.github.com/yairEO/7030050) for that — vsync, Aug 28 '17 at 14:54

Vladislav Vazhenin · Accepted Answer · 2017-08-28T14:57:06.913

0

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

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

edited Aug 28 '17 at 14:57

answered Aug 28 '17 at 14:51

Vladislav Vazhenin

339
6
21

score 0 · Answer 2 · answered Aug 28 '17 at 14:53

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);
}

score 0 · Answer 3 · answered Apr 14 '21 at 10:43

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;

scroll down on click with animations

3 Answers3