javascript scrollTo 速度/持续时间设置

scrollTo speed/duration setting

提问by GoldenGonaz

Is there a way to speed up the behavior speed of scrollTo?

有没有办法加快 的行为速度scrollTo？

I had a stab in the dark at speedand durationbut don't work!

我在黑暗中刺了一下speed，duration但不起作用！

window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

Reference:

参考：

• https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

• https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

采纳答案by ?ɑ??????

Pure javascriptsolution, see the example below:

纯javascript解决方案，看下面的例子：

https://jsfiddle.net/rafarolo/zwkesrxh/3/

https://jsfiddle.net/rafarolo/zwkesrxh/3/

Minified version: https://jsfiddle.net/rafarolo/8orw7ak3/3/

缩小版：https://jsfiddle.net/rafarolo/8orw7ak3/3/

Just change the second parameter from scrollTopTofunction to refine your speed control.

只需更改scrollTopTo函数中的第二个参数即可优化您的速度控制。

// scroll to top (0) in 4 seconds e some milliseconds
scrollTo(0, 4269);

// Element to move, time in ms to animate
function scrollTo(element, duration) {
    var e = document.documentElement;
    if(e.scrollTop===0){
        var t = e.scrollTop;
        ++e.scrollTop;
        e = t+1===e.scrollTop--?e:document.body;
    }
    scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if(typeof from === "object")from=from.offsetTop;
    if(typeof to === "object")to=to.offsetTop;

    scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
    if (t01 < 0 || t01 > 1 || speed<= 0) {
        element.scrollTop = xTo;
        return;
    }
    element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
    t01 += speed * step;

    setTimeout(function() {
        scrollToX(element, xFrom, xTo, t01, speed, step, motion);
    }, step);
}
function easeOutCuaic(t){
    t--;
    return t*t*t+1;
}

Minified version:

缩小版：

// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;
if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}
b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),
"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){
function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),
f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){t--;return t*t*t+1;}

Reference:

参考：

• https://stackoverflow.com/a/23844067/5626568

• https://stackoverflow.com/a/23844067/5626568

回答by Gopinath

Working solution using Promise:

使用 Promise 的工作解决方案：

function scrollDelay(ms) {
    return new Promise(res => setTimeout(res, ms));
}

document.getElementById("slow-scroll-demo-button").onclick = async function() {
    for (var y = 0; y <= 4200; y += 100) {
        window.scrollTo({top: y, behavior: 'smooth'})
        await scrollDelay(100)
    }
}

Trick to introduce delay in scrolling:

引入滚动延迟的技巧：

1. Create an async functioncalled scrollDelay()that spends time by calling a promise

2. Call the scrollDelayalong with scrollToin a forloop

1. 创建一个async function名为scrollDelay()通过调用一个承诺花时间

2. 调用scrollDelay沿scrollTo在for环