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

Does this answer your question? Make repeated scrollBy smoother like jQuery's animate scrollTop — Gert Arnold
– Gert Arnold, Commented Sep 20, 2022 at 18:37

yckart · Accepted Answer · 2013-03-31 12:45:36Z

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, 2013 at 12:45

answered Feb 11, 2013 at 17:59

yckart

33.6k11 gold badges126 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1845661 Over a year ago

that sorta works. except that when I click it a second time it doesn't do anything. any idea what I'm doing wrong?

yckart Over a year ago

@user_1845661 add .stop() before .animate I've updated my answer

user1845661 Over a year ago

Thanks a lot! That did exactly what I wanted.

yckart Over a year ago

@user_1845661 Good :) I've updated it again, now you can even use negative values, to scroll in reverse direction...

redolent · Accepted Answer · 2013-02-11 17:59:12Z

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, 2013 at 17:59

redolent

4,2895 gold badges41 silver badges48 bronze badges

Collectives™ on Stack Overflow

Animated javascript scrollBy

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related