Question

Hello堆栈溢出用户，我正在寻找制作javascript window.scroll的代码慢，但我还没找到任何东西。有人可以建议我如何动画这种类型的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>

阅读有关javascript中静态变量的here

减慢onclick window.scrollBy

1 个答案: