Animated javascript scrollBy

Question

I have a next button that when clicked I want it to scroll down the page 517px.

Using the following code (which I have found on another site) I have made a button that does that but I would like it to scroll in a smooth animated way. What would I need to add to do that?

The code I am using is a follows:

function scrollByPixels(x, y)
{
  window.scrollBy(x, y);
}

and the following on the actual button:

onclick="javascript:scrollByPixels(0, 517)"

Thanks in advance

You can try a plugin: http://demos.flesler.com/jquery/scrollTo/ — Augusto Hack, Feb 11 '13 at 18:09
Does this answer your question? [Make repeated scrollBy smoother like jQuery's animate scrollTop](https://stackoverflow.com/questions/22644902/make-repeated-scrollby-smoother-like-jquerys-animate-scrolltop) — Gert Arnold, Sep 20 '22 at 18:37

yckart · Accepted Answer · 2013-03-31T12:45:36.280

2

function scrollByPixels(x, y) {
  $('html,body').stop().animate({
    scrollLeft: '+=' + x,
    scrollTop: '+=' + y
  });
}

...or as a simple plugin:

$.fn.scrollBy = function(x, y){
    return this.animate({
        scrollLeft: '+=' + x,
        scrollTop: '+=' + y
    });
};

demo

edited Mar 31 '13 at 12:45

answered Feb 11 '13 at 17:59

yckart

32,460
9
122
129

that sorta works. except that when I click it a second time it doesn't do anything. any idea what I'm doing wrong? – user1845661 Feb 11 '13 at 18:04
@user_1845661 add .stop() before .animate I've updated my answer – yckart Feb 11 '13 at 18:06
Thanks a lot! That did exactly what I wanted. – user1845661 Feb 11 '13 at 18:14
@user_1845661 Good :) I've updated it again, now you can even use negative values, to scroll in reverse direction... – yckart Feb 11 '13 at 18:15

score 1 · Answer 2 · answered Feb 11 '13 at 17:59

1

To scroll the whole window:

var value = $("#scrollToHere").offset().top;

$('html, body').animate({
        scrollTop: value
    }, 800);

Source: http://blog.alaabadran.com/2009/03/26/scroll-window-smoothly-in-jquery/

answered Feb 11 '13 at 17:59

redolent

4,159
5
37
47

Animated javascript scrollBy

2 Answers2