javascript - windows.scroll通过在顶部添加固定滚动值

Question

我有这个函数，我在我的 AngularJS 指令中使用它。这个函数滚动到页面顶部，但这不是我的目标:我想让它向上滚动 400px 或 30%。

function scrollToTop() {
    var scrollDuration = 500;
    var scrollStep = -window.scrollY / (scrollDuration / 15);
    console.log(scrollStep);

    var scrollInterval = setInterval(function () {
        if (window.scrollY != 0) {
           window.scrollBy(0, scrollStep);
        } else {
           clearInterval(scrollInterval);
        }
    }, 15);
}

我尝试将 scrollStep 变量更改为 300 或任何其他数字，但实际上我无法理解它。

Answer 1

总的 distanceToScroll 可以是任意数量的像素(即 400)，也可以是整个窗口滚动距离(如果小于 400)。为此，您可以使用 Math.min。 scrollStep 是根据 distanceToScroll 计算的。您需要在 setInterval 中记录“到目前为止我滚动了多少”，我们将其称为 distanceScrolled。继续滚动，直到覆盖 distanceToScroll。

function scrollToTop() {
    var scrollDuration = 500;
    var stepDuration = 15;
    
    var distanceToScroll = Math.min(400, window.scrollY);
    
    var scrollStep = distanceToScroll / (scrollDuration / stepDuration);
    console.log(scrollStep);

    var distanceScrolled = 0;

    var scrollInterval = setInterval(function () {
        if (distanceScrolled < distanceToScroll) {
           window.scrollBy(0, -1 * scrollStep);
           distanceScrolled += scrollStep
        } else {
           clearInterval(scrollInterval);
        }
    }, stepDuration);
}

document.getElementById('btn').addEventListener('click', scrollToTop);

#very-high {
  height: 3000px;
}

#btn {
  position: fixed;
  right: 10px;
  top: 10px;
}

<div id="very-high"></div>
<button id="btn">Scroll</button>