根据曲线/公式/公式修改滚动持续时间

Question

我需要滚动到顶部，并希望根据视口在滚动之前在文档中的向下移动程度来修改滚动的持续时间。我想随着滚动长度的增加添加较小的时间增量。所以我在解决的问题是如何将曲线应用于一个数字，一个我假设的方程。我的数学生锈了。

例如，我该如何执行以下操作：

0 to 1000 pixels -> 300 (+300)
1001 to 2000 -> 500 (+200)
2001 to 3000 -> 700 (+200)
3001 to 4000 -> 800 (+100)
4001 to 5000 -> 900 (+100)

然后继续为每 100 像素添加 1000 个增量。或者，一旦曲线到达一个点，则每 1000 个曲线至少增加 100。

我知道我可以用if/else if语句来做上述事情，但为了简洁起见，我希望用数学来做，所以更容易玩弄这些值。

抱歉，因为我确定此信息已在其他地方存在，但我不确定如何措辞搜索以找到我正在寻找的答案。只需指向正确类型的数学或教程的指针就足够了，但当然，更详细的答案也将不胜感激。

我也会对任何关于这个特定用例感觉更自然的建议感兴趣。我试过了：

var duration = Math.ceil ( $('html').scrollTop() / 1000 ) * 300;

但是对于更长的距离来说，感觉太慢了。

更新

关于if/else if选项，我想出了下面的伪代码，它使用if/else if但具有一定的灵活性，紧凑。我仍然想用一些数学代替if/else if语句。

num = scrollTop
duration = 0
while ( num > 0 ) {
a = Math.ceil(num/1000)
if ( a >= 4 ) {
duration += 100
} else if ( a >= 2 ) {
duration += 200
} else {
duration += 300
}
num -= 1000
}

更新 2

我已经实现了这个来代替更好的解决方案，这是JS：

var num = $('html').scrollTop();
var duration = 0;
while ( num > 0 ) {
var a = Math.ceil(num/1000);
if ( a >= 4 ) {
duration += 100;
} else if ( a >= 2 ) {
duration += 200;
} else {
duration += 300;
}
num -= 1000;
}

Answer 1

癫痫警告！

您可以使用"递归"调用来requestAnimationFrame内部更改值以控制滚动速度。

例子：

恒速恒加速度：

var speed = 3;
var position = 2000;
var acceleration = 1.3;
window.scrollTo(0, position);
scrollToTopAnimated();
function scrollToTopAnimated() {
requestAnimationFrame((delta) => {
var deltaSec = delta / 1000;
speed += acceleration * deltaSec;
position -= speed * deltaSec;
window.scrollTo(0, position);
if (position > 0)
scrollToTopAnimated();
})
}

body {
height: 2000px;
width: 100%;
background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}

<h1> Hello World </h1>

或者用正弦波作为加速度：

var speed = 2;
var position = 2000;
var posOnSin = 0;
var sinSpeed = Math.PI;
window.scrollTo(0, position);
scrollToTopAnimated();
function scrollToTopAnimated() {
requestAnimationFrame((delta) => {
var deltaSec = delta / 1000;
position -= speed * deltaSec + Math.sin(posOnSin) * deltaSec * 2;
posOnSin += sinSpeed * deltaSec;
window.scrollTo(0, position);
if (position > 0)
scrollToTopAnimated();
})
}

body {
height: 2000px;
width: 100%;
background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}

<h1> Hello World </h1>