滚动触发location.assign()跳转后无法返回上一页的问题求助

DevOps 小满

2026-8-18

解决滚动触发跳转后无法返回原页面的问题

问题核心：从index2.html返回index.html时，页面会停留在之前滚动到底部的位置，导致scroll事件再次触发，立刻又跳回index2.html，根本没法停在原页面。

解决方案1：添加触发标记，避免重复执行

给跳转逻辑加个开关，只允许触发一次，返回后可以重置开关让它能再次触发：

// 初始化标记：未触发过跳转
let hasTriggeredJump = false;

window.onscroll = function(ev) {
    // 只有没触发过跳转，且确实滚动到底部时才执行
    if (!hasTriggeredJump && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       hasTriggeredJump = true; // 触发后锁死开关
       setTimeout(function() {
          location.assign('./index2.html')
       }, 1000)
    }
};

// 监听页面显示事件，返回原页面时重置开关
window.addEventListener('pageshow', function() {
    hasTriggeredJump = false;
});

解决方案2：清除重复定时器，防止多次触发

如果用户快速滚动到底部多次，会生成多个定时器，这个方案能避免叠加，同时离开底部时取消跳转：

let jumpTimer = null;

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       // 先清除之前的定时器，避免重复触发
       if (jumpTimer) clearTimeout(jumpTimer);
       jumpTimer = setTimeout(function() {
          location.assign('./index2.html')
       }, 1000)
    } else {
       // 离开底部区域时，取消跳转定时器
       if (jumpTimer) {
           clearTimeout(jumpTimer);
           jumpTimer = null;
       }
    }
};

// 返回原页面时清空定时器状态
window.addEventListener('pageshow', function() {
    if (jumpTimer) {
        clearTimeout(jumpTimer);
        jumpTimer = null;
    }
});