动画javascript滚动

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

使用下面的代码（我在另一个网站上找到）我制作了一个按钮，可以做到这一点，但我希望它能够以平滑的动画方式滚动。我需要补充什么才能做到这一点

我使用的代码如下所示：

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

在实际按钮上显示以下内容：

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

---

提前感谢您滚动整个窗口：

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

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

资料来源：

…或作为一个简单的插件：

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

---

如果您发现自己在这里，是因为您正在寻找一个健壮但没有jQuery的解决方案。你可以从这里开始

scrollByAnimated=函数（滚动，持续时间）{
//要点https://gist.github.com/loadedsith/857540fd76fe9c0609c7
var startTime=new Date（）.getTime（）；
var startY=window.scrollY；
var endY=开始+滚动；
var currentY=startY；
var directionY=scrollY>0？'down'：'up'；
var动画完成；
var计数=0；
var-animationId；
如果（持续时间===未定义）{
持续时间=250；//毫秒
}
//从浏览器中获取滚动事件
var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“DOMMouseScroll”：“mouseweel”//FF从FF3.x开始就无法识别mouseweel
//如果当前动画仍由用户输入，则停止当前动画
var cancelAnimation=函数（）{
if（animationId！==未定义）{
window.cancelAnimationFrame（animationId）
animationId=未定义；
}
}
如果（文件附件）{
//如果IE（和Opera取决于用户设置）
文档。附件（“在”+鼠标滚轮上，取消动画）
}else if（文件.增补列表器）{
//WC3浏览器
document.addEventListener（mousewheelevt、cancelAnimation、false）
}
var阶跃=函数（a、b、c）{
var now=new Date（）.getTime（）；
var完备性=（现在-开始时间）/持续时间；
scrollTo（0，数学四舍五入（起始+完整*滚动））；
currentY=window.scrollY；
如果（方向Y=='up'）{
如果（当前Y==0）{
animationComplete=true；
}否则{
animationComplete=currentY=endY；
}
} 
如果（animationComplete==true）{
/*停止动画*/
返回；
}否则{
/*重复动画*/
如果（计数>500）{
返回；
}否则{
计数++；
animationId=window.requestAnimationFrame（步骤）；
}
}
};
/*开始动画*/
步骤（）；
};
scrollByAnimated（100250）；//滚动Y的变化，持续时间（毫秒）

您是否使用了jQuery之类的库？我正在使用jQuery，是的。您可以尝试一个插件：这类插件可以工作。除了当我再次点击它时，它什么也不做。知道我做错了什么吗？@user_1845661 add.stop（）之前。动画我已经更新了我的答案谢谢！这正是我想要的。@user_1845661 Good:）我再次更新了它，现在你甚至可以使用负值，反向滚动……这应该是答案。谢谢

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

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