0

免责声明：我不是 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

谢谢你。

4

2 回答 2

1

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

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

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

于 2021-05-25T21:58:44.967 回答
0

非常感谢你的回答！

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

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

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

它看起来像这样：

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

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

于 2021-05-25T23:38:47.420 回答