减速scrollTo()函数

Question

我希望页面滚动到一个特定的点，并逐渐缓慢，因为它接近这一点。

我想用下面这个问题的最上面的答案(包括代码)，尽管我不认为一个简单的因素会产生我想要达到的减速效果：在运行时更改SetInterval的间隔

function setDeceleratingTimeout( callback, factor, times )
{
  var internalCallback = function( t, counter )
  {
    return function()
    {
      if ( --t > 0 )
      {
        window.setTimeout( internalCallback, ++counter * factor );
        callback();
      }
    }
  }( times, 0 );

  window.setTimeout( internalCallback, factor );
};

下面是我在我的站点上使用的一系列函数，虽然它在jsfiddle.com中不起作用，但我假设是因为它不是由页面加载触发的：

function Scroll_01()
{
    window.scrollTo(0,100)
    setTimeout('Scroll_02()',25)
}
function Scroll_02()
{
    window.scrollTo(0,136)
    setTimeout('Scroll_03()',25)
}
function Scroll_03()
{
    window.scrollTo(0,169)
    setTimeout('Scroll_04()',25)
}
function Scroll_04()
{
    window.scrollTo(0,188)
    setTimeout('Scroll_05()',25)
}
function Scroll_05()
{
    window.scrollTo(0,207)
    setTimeout('Scroll_06()',25)
}
function Scroll_06()
{
    window.scrollTo(0,221)
    setTimeout('Scroll_07()',25)
}
function Scroll_07()
{
    window.scrollTo(0,235)
    setTimeout('Scroll_08()',25)
}
function Scroll_08()
{
    window.scrollTo(0,245)
    setTimeout('Scroll_09()',25)
}
function Scroll_09()
{
    window.scrollTo(0,255)
    setTimeout('Scroll_10()',25)
}
function Scroll_10()
{
    window.scrollTo(0,262)
    setTimeout('Scroll_11()',25)
}
function Scroll_11()
{
    window.scrollTo(0,270)
    setTimeout('Scroll_12()',25)
}
function Scroll_12()
{
    window.scrollTo(0,277)
    setTimeout('Scroll_13()',25)
}
function Scroll_13()
{
    window.scrollTo(0,285)
    setTimeout('Scroll_14()',25)
}
function Scroll_14()
{
    window.scrollTo(0,288)
    setTimeout('Scroll_15()',25)
}
function Scroll_15()
{
    window.scrollTo(0,292)
    setTimeout('Scroll_16()',25)
}
function Scroll_16()
{
    window.scrollTo(0,294)
    setTimeout('Scroll_17()',25)
}
function Scroll_17()
{
    window.scrollTo(0,296)
    setTimeout('Scroll_18()',25)
}
function Scroll_18()
{
    window.scrollTo(0,298)
    setTimeout('Scroll_19()',25)
}
function Scroll_19()
{
    window.scrollTo(0,300)
}

http://jsfiddle.net/8S3CL/

我在一张图表上画出了scrollTo Y访问号，从100到300的值试图实现一条平滑的曲线，这条曲线很好，但显然不是很好的代码。

有谁知道用什么JavaScript代码和等式来代替19个雏菊链函数呢？

Answer 1

您可以通过使用setTimeout递归调用来实现您的目标，根据当前位置和目标位置之间的距离调整滚动步骤。

我创建了一个小提琴来演示它，这里。

关键部分是递归调用：

function smoothScrollTo(targetY, step, intervalMs) {
    ...
    setTimeout(function() { smoothScrollTo(targetY, step, intervalMs); }, intervalMs); 
}

并计算滚动步骤：

var sgn = Math.sign(targetY-currentY);
var distance = Math.abs(currentY-targetY);
var step1 = (distance < 100) ? Math.max(step*distance/50,1) : step;
window.scrollTo(0, currentY+sgn*step1);

但是，您应该对此方法进行改进，以计算出一些问题：

1. 验证给定的目标位置。
2. 引入一个可选回调，该回调将在滚动达到目标时调用。
3. 如果用户在这个平滑的滚动过程中滚动怎么办？使用当前的方法，javascript将不会停止，并且希望滚动到它的目标，即使用户滚动期间。