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>

windows.scrollBy将固定的滚动值添加到顶部

1 个答案: