javascript - 减慢onclick window.scrollBy

Question

我正在寻找使 JavaScript window.scrollBy 变慢的代码，但我还没有找到任何东西。有人可以告诉我如何为这种类型的 JavaScript 滚动设置动画吗？不，这个链接对我没有帮助Cross browser JavaScript (not jQuery...) scroll to top animation

这里是JSFiddle

<a  onclick="window.scrollBy(0, 300)">Make me slower</a>

Answer 1

不确定这是最好的方法，但它工作正常，很好而且清晰:

function scrollByRate(y, rate) 
{
  //calculate the scroll height
  var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);

  //save the old value as "static" var
  arguments.callee.tmp = arguments.callee.tmp || scrolling + y;

  //make a little scrolling step
  window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);

  //are we arrived? if no, keep going recursively, else reset the static var
  if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
  else arguments.callee.tmp = undefined;      
}

然后你的 onclick 将是这样的:

<a href="javascript:void(0);" onclick="scrollByRate(1000,20)">Scrolling down slowly</a>     

在这里尝试

function scrollByRate(y, rate) {
    var scrolling = Math.max( document.getElementsByTagName('html')[0].scrollTop, document.body.scrollTop);
    arguments.callee.tmp = arguments.callee.tmp || scrolling + y;
    window.scrollBy(0, (arguments.callee.tmp - scrolling) / rate);
    if(arguments.callee.tmp - scrolling > 100) setTimeout(function() { scrollByRate(y, rate); }, 10);
    else arguments.callee.tmp = undefined;      
}

p {
  height:100px;
}

<p>
  <a href="javascript:void(0);" onclick="scrollByRate(500,20)">Scrolling down slowly</a>
</p>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<p>h</p>
<p>i</p>
<p>l</p>

阅读here关于 JavaScript 中的静态变量