Javascript setTimeout 无法正常工作，平滑滚动

Question

我编写了以下困惑的 JavaScript，它应该平滑地将页面滚动到 div 上方 128px。

脚本将页面滚动到正确的位置，但不平滑。

这是因为我无法让函数setTimeout正常工作。

function pageScroll()
{   
    var from_top=$("#body_box_title_skills").offset().top;  

    scroll_speed = 15;
    goto_px = from_top - 128;

    times_scroll = goto_px / scroll_speed; 
    times_scroll = times_scroll.toString();

    times_scroll_array = times_scroll.split(".");
    times_scroll_array[1] = "0."+times_scroll_array[1];

    px_scroll_extra = times_scroll_array[1] * scroll_speed;

    scrollto_px = 0;

    while (times_scroll_array[0] >= 1)
    {
        scrollto_px = scrollto_px + scroll_speed;
        setTimeout(function(){window.scrollTo(0,scrollto_px)}, 1000);
        times_scroll_array[0]--;
    }
    scrollto_px = scrollto_px + px_scroll_extra;
    window.scrollTo(0,scrollto_px);

}

Answer 1

您的问题是您在 setTimeout 中关闭了同一个变量 scrollto_px。当 setTimeout 函数实际运行时，scrollto_px 的值与循环结束时的值相同，因此您只需立即滚动到最后一个值即可。您需要复制到 setTimeout 可以关闭的新变量。

你的第二个问题是你设置的超时几乎同时触发。您需要链接超时，以便第一次超时发生在 1000 秒后，下一次超时发生在 1000 秒后。请注意，setTimeout 与其他语言中的 sleep 不同。它不会暂停执行。

你的第三个问题是你有这些行:

scrollto_px = scrollto_px + px_scroll_extra;
window.scrollTo(0,scrollto_px);

在 while 循环之后，它会自动跳到最后。

这是解决您遇到的问题的一种方法。我删除了 while 循环并添加了一个函数，该函数将在超时后再次调用自身:

function doScroll() {
    if (times_scroll_array[0] >= 1) {
        scrollto_px = scrollto_px + scroll_speed;
        console.log(scrollto_px);
        window.scrollTo(0, scrollto_px);
        times_scroll_array[0]--;
        setTimeout(doScroll, 100);
    } else {
        scrollto_px = scrollto_px + px_scroll_extra;
        window.scrollTo(0, scrollto_px);
    }
}
doScroll();

你可以看到它在这里运行(我改变了时间，因为步骤之间的 1 秒真的很慢 - 但你可以根据需要调整它): http://jsfiddle.net/KqRwx/