Question

我正在开发一个将窗口滚动到给定位置的函数。我的脚本有效，但我想让缓和效果更加顺畅。

如何在javascript中制作缓动效果（我不想使用jquery等插件）？

这是我的缓和功能：

function myScrollFunction(yPositionToScrollTo){

    setTimeout(function(){
        if(window.pageYOffset < yPositionToScrollTo - 640){window.scroll(0, window.pageYOffset+64)}
        else if(window.pageYOffset < yPositionToScrollTo - 320){window.scroll(0, window.pageYOffset+32)}
        else if(window.pageYOffset < yPositionToScrollTo - 160){window.scroll(0, window.pageYOffset+16)}
        else if(window.pageYOffset < yPositionToScrollTo - 80){window.scroll(0, window.pageYOffset+8)}
        else if(window.pageYOffset < yPositionToScrollTo - 40){window.scroll(0, window.pageYOffset+4)}
        else if(window.pageYOffset < yPositionToScrollTo - 10){window.scroll(0, window.pageYOffset+2)}
        else{window.scroll(0, window.pageYOffset+1)}
        if(window.pageYOffset < yPositionToScrollTo){
            myScrollFunction(yPositionToScrollTo);
        }
    },20)

}

更新

function myScrollFunction(yPositionToScrollTo){

var differens = yPositionToScrollTo - window.pageYOffset;

    setTimeout(function(){
        window.scroll(0, yPositionToScrollTo + differens/2);
        if(window.pageYOffset < yPositionToScrollTo){
            myScrollFunction(yPositionToScrollTo);
        }
    },20)

}

Answer 1

除yPositionToScrollTo - 10案例外，您的代码与此近似：

var scrollDistance = yPositionToScrollTo - window.pageYOffset;
var scrollSpeed = scrollDistance/10;
if (scrollSpeed > 64) {
    scrollSpeed = 64;
}
window.scroll(0,window.pageYOffset+scrollSpeed);

第一行只是重新排列重复的ifs：

if (window.pageYOffset < yPositionToScrollTo - 640) ...

// Take out the expression:

window.pageYOffset < yPositionToScrollTo - 640

// Replace hardcoded value with a variable:

window.pageYOffset < yPositionToScrollTo - scrollDistance

// Rearrange expression:

window.pageYOffset + scrollDistance < yPositionToScrollTo

// Rearrange some more:

scrollDistance < yPositionToScrollTo - window.pageYOffset

// Restate equation in the form of an assignment to calculate scrollDistance:

var scrollDistance = yPositionToScrollTo - window.pageYOffset

第二行是根据硬编码滚动数始终是if表达式中硬编码数值的1/10这一事实推断出的：

64 is 640/10
32 is 320/10 ... etc

if表达式只是指的是，对于大于640的所有距离，滚动速度为64.换句话说，最大速度为64.

现在，您可以使用计算出的，而不是硬编码的滚动速度顺利滚动。

使用此代码，可以更简单地使用变量来获得正确的缓动速度。例如，对于我的大多数项目，我个人更喜欢将scrollSpeed设置为scrollDistance/2，这比scrollDistance/10更快，并且不会将其限制为任何最大速度。更改除数和最大速度常数以获得所需的缓动。

实际上，如果给出常量名称，可以使代码更具可读性：

var INERTIA = 10;   // lower = faster, higher = slower
var MAX_SPEED = 64;

var scrollDistance = yPositionToScrollTo - window.pageYOffset;
var scrollSpeed = scrollDistance/INERTIA;
if (scrollSpeed > MAX_SPEED) {
    scrollSpeed = MAX_SPEED;
}
window.scroll(0,window.pageYOffset+scrollSpeed);

Answer 2

您可能想要检查此平滑滚动解决方案：http://cferdinandi.github.io/smooth-scroll/

它（几乎）开箱即用 - 请参阅页面上的说明 - 并且非常轻量级（特别是如果您将代码剥离到实际需要的最小值，然后缩小和压缩）。它在一个评论良好的代码中有很多缓动曲线。它应该是你的最佳选择:)。

在纯JavaScript中缓解效果

2 个答案: