如何使用JavaScript的scroll函数滚动到指定位置后返回顶部？

原代码的核心问题是：调用window.scrollBy()会再次触发scroll事件，形成无限循环；同时当你向上滚动时，只要滚动后的位置仍大于350px，就会被强制拉回下方，导致无法正常向上滚动。

需要添加触发条件的限制，确保自动滚动只执行一次，并且不干扰用户主动的向上滚动操作。以下两种方案可解决问题：

方案一：用标记位控制执行逻辑 #

设置变量标记是否已执行过自动滚动，同时在用户滚回触发点以下时重置标记，允许后续再次触发：

let hasAutoScrolled = false;
window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
    // 仅在未执行过自动滚动且当前位置超过350px时触发
    if (window.scrollY > 350 && !hasAutoScrolled) {
        hasAutoScrolled = true;
        window.scrollBy(0, 250);
    }
    // 用户向上滚回350px以下时，重置标记
    if (window.scrollY <= 350) {
        hasAutoScrolled = false;
    }
}

方案二：通过区间判断避免重复触发 #

直接判断当前位置是否处于触发点到目标点的区间内，仅在该区间执行一次定位滚动：

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
    const triggerPos = 350;
    const scrollOffset = 250;
    const targetPos = triggerPos + scrollOffset;
    // 仅当当前位置超过触发点但未到达目标点时，直接定位到目标位置
    if (window.scrollY > triggerPos && window.scrollY < targetPos) {
        window.scrollTo(0, targetPos);
    }
}

• 使用scrollTo()替代scrollBy()可以直接定位到目标位置，减少滚动事件的触发次数
• 两种方案都能有效阻断无限循环，同时不干扰用户主动的向上滚动操作

内容的提问来源于stack exchange，提问作者emm.1