纯JavaScript的缓和效果

Question

I am working on a function that will scroll the window to a given position. My script works, but I would like to make the easing effect more smooth.

How can I make a easing effect in javascript (i dont want to use plugins like jquery or others)?

Here's my easing function:

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)

}

Update:

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

Except for the yPositionToScrollTo - 10 case, your code is approximating this:

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

The first line is simply rearranging your repeated 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

The second line is inferred from the fact that the hardcoded scroll number is always 1/10 the value of the hardcoded number in the if expressions:

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

The if expression is simply referring to the fact that for all distances larger than 640 the scroll speed is 64. Put it another way the maximum speed is 64.

Now you can smoothly scroll using the calculated, rather than hardcoded, scroll speed.

With this code it's much simpler to play around with the variables to get the correct easing speed. For example, for most of my projects I personally prefer to set scrollSpeed to scrollDistance/2 which is faster than scrollDistance/10 and not limit it to any maximum speed. Change the divisor and max speed constants to get the easing you want.

Actually, you can make the code much more readable if you give the constants names:

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

You might wanna check this smooth scrolling solution out: http://cferdinandi.github.io/smooth-scroll/

It works (almost) out of the box — see instructions on page — and is very very lightweight (especially if you strip the code down to the minimum you actually need and then minify and compress). It has a good bunch of easing curves in a well commented code. It should be perfect for you :)