动画javascript scrollBy

Question

我有一个下一个按钮，当点击时，我希望它向下滚动页面517px。

使用下面的代码（我在另一个网站上找到）我已经制作了一个按钮，但是我希望它以平滑的动画方式滚动。我需要添加什么来做到这一点？

我使用的代码如下：

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

以及实际按钮上的以下内容：

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

提前致谢

Answer 1

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

...或者作为一个简单的插件：

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

<强> demo

Answer 2

如果你发现自己在这里，因为你正在寻找一个强大但无jQuery的解决方案。你可以从这里开始;

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

Answer 3

滚动整个窗口：

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

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

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