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

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

30,290
9
117
125

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 2 · Answer 2 · edited May 23 '17 at 12:14

If you found yourself here because you were looking for a robust but jQuery-less solution. You can start here;

original Stackoverflow question and answer here

scrollByAnimated = function(scrollY, duration){
  //gist here https://gist.github.com/loadedsith/857540fd76fe9c0609c7
  var startTime = new Date().getTime();

  var startY = window.scrollY;
  var endY = startY + scrollY;
  var currentY = startY;
  var directionY = scrollY > 0 ? 'down' : 'up';

  var animationComplete;
  var count = 0;

  var animationId;

  if(duration === undefined){
    duration = 250;//ms
  }

  //grab scroll events from the browser
  var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

  //stop the current animation if its still going on an input from the user
  var cancelAnimation = function () {
    if(animationId!==undefined){
      window.cancelAnimationFrame(animationId)
      animationId=undefined;
    }

  }

  if (document.attachEvent) {
    //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, cancelAnimation)
  } else if (document.addEventListener) {
    //WC3 browsers
    document.addEventListener(mousewheelevt, cancelAnimation, false)
  }

  var step = function (a,b,c) {
    var now = new Date().getTime();
    var completeness = (now - startTime) / duration;
    window.scrollTo(0, Math.round(startY + completeness * scrollY));
    currentY = window.scrollY;
    if(directionY === 'up') {
      if (currentY === 0){
        animationComplete = true;
      }else{
        animationComplete = currentY<=endY;
      }
    } 
    if(directionY === 'down') {
      /*limitY is cross browser, we want the largest of these values*/ 
      var limitY = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
      if(currentY + window.innerHeight === limitY){
        animationComplete = true;
      }else{
        animationComplete = currentY>=endY;
      }
    } 

    if(animationComplete===true){
      /*Stop animation*/
      return;
    }else{
      /*repeat animation*/
      if(count > 500){
        return;
      }else{
        count++;
        animationId = window.requestAnimationFrame(step);
      }

    }
  };
  /*start animation*/  
  step();
};

scrollByAnimated(100, 250);// change in scroll Y, duration in ms

This should be the answer. Thanks. – Jonny Haynes Jul 29 '16 at 11:05 — Jonny Haynes, Jul 29 '16 at 11:05

score 1 · Answer 3 · 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

3,957
5
34
43

Animated javascript scrollBy

3 Answers3