如果用户滚动，则停止脚本

问题描述

免责声明：我不是 JavaScript 开发人员，而是网页设计师。 HTML和CSS，我整天处理，JS，没那么多。这就是我寻求帮助的原因。

以下脚本允许平滑滚动到页面顶部：

function scrollToTop() {
    var position =
        document.body.scrollTop || document.documentElement.scrollTop;
    if (position) {
        window.scrollBy(0,-Math.max(1,Math.floor(position / 10)));
        scrollAnimation = setTimeout("scrollToTop()",30);
    } else clearTimeout(scrollAnimation);
}

如果用户决定在脚本运行时向下滚动并将用户带回页面顶部，是否有办法“停止”脚本的执行？

这是一个供参考的演示：https://codepen.io/ricardozea/pen/ewBzyO

谢谢。

解决方法

要专门检测页面向下滚动，您可以根据当前位置检查旧位置，并确保滚动按预期方向移动：

function scrollToTop(prevPosition) {
    // first time round,prevPosition is undefined
    var position =
        document.body.scrollTop || document.documentElement.scrollTop;

    // did page move in non-expected direction? If so,bail-out
    if (prevPosition <= position) {
        return;
    }
    var scrollAnimation; //declare this so it doesn't leak onto global scope
    if (position) {
        var scrollAmt = -Math.max(1,Math.floor(position / 10));
        window.scrollBy(0,scrollAmt);
        // After timeout,re-call the function with current position. 
        // Becomes prevPosition for the next time round
        scrollAnimation = setTimeout(() => scrollToTop(position),30);
    } else clearTimeout(scrollAnimation);
}

见https://codepen.io/spender/pen/eYvRyox

为什么不听轮事件？这不会检测到用鼠标拖动滚动条。

,

非常感谢您的回答！

在咨询了我的一个朋友后，他为我提供了一种非常简洁的方法来完成平滑滚动到顶部的整体行为，同时解决用户想要在动画过程中向下滚动的潜在情况。

只需将此脚本添加到 <button> 属性中的 onclick: 元素：

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

看起来像这样：

<button onclick='window.scrollTo({top: 0,behavior: "smooth"});'>Back to Top ↑</button>

这是一个新的演示：https://codepen.io/ricardozea/pen/NWpgyjL