在启用PJAX的情况下，后退时页面滚动位置异常

[LunaSpica]

问题描述：
在启用PJAX的情况下，后退时页面滚动位置异常。

问题出处：
iro主题设置--全局设置--额外设置--功能--PJAX局部刷新

实际行为描述：
启用"PJAX 局部刷新"后,在博客首页打开任意文章,然后点击浏览器的后退按钮(鼠标后退按钮)回到首页,首页的页面位置与打开文章前对比,首页自动向下滚动了.

预期的行为：
启用"PJAX 局部刷新"后,在博客首页打开任意文章,然后点击浏览器的后退按钮,返回上级页面时,上级页面应保持原来的滚动位置

复现步骤：
打开pjax后稳定触发

配置与环境：

• 问题站点链接：
• https://kiseki.blog/
• https://www.suiyue.site/
• PHP 版本：8.3.24
• 数据库类型 / 版本：mysqlnd 8.3.24
• WordPress 版本：6.8.3
• 主题版本：3.0.4
• 使用的插件：
• WP Statistics
• WordPress 导入工具
• 浏览器：Google Chrome 版本 142.0.7444.163（正式版本） （64 位）

截图
打开文章前:

打开文章后:

执行后退操作后:

补充信息：
可以注意到,首页向下滚动了.

解决方案(借助AI)
在主题的functions.php文件末尾，iro_action_operator();调用之前添加以下代码：

代码说明：
该解决方案通过监听PJAX事件，在页面跳转前保存当前滚动位置，在返回时恢复位置，确保用户体验的一致性。

add_action('wp_footer', function() {
    ?>
    <script>
    (function() {
        console.log('=== 改进的PJAX滚动修复 ===');
        
        var savedScrollPositions = {};
        var lastValidScrollY = 0;
        var isProcessing = false;
        
        // 记录最后一次有效滚动位置
        var scrollTimer = null;
        window.addEventListener('scroll', function() {
            clearTimeout(scrollTimer);
            scrollTimer = setTimeout(function() {
                if (window.scrollY > 10) { // 只记录有意义的滚动位置
                    lastValidScrollY = window.scrollY;
                    console.log('记录有效滚动位置:', lastValidScrollY);
                }
            }, 100);
        });
        
        // 改进的PJAX事件处理
        document.addEventListener('pjax:send', function() {
            if (isProcessing) return;
            
            isProcessing = true;
            
            // 使用最后一次有效滚动位置，而不是当前可能已被重置的位置
            var currentUrl = window.location.href;
            var scrollToSave = lastValidScrollY > 0 ? lastValidScrollY : window.scrollY;
            
            savedScrollPositions[currentUrl] = {
                x: window.scrollX,
                y: scrollToSave,
                time: Date.now(),
                valid: scrollToSave > 10 // 标记是否有效
            };
            
            console.log('PJAX发送 - 保存位置:', scrollToSave, '有效:', scrollToSave > 10);
            
            setTimeout(function() {
                isProcessing = false;
            }, 50);
        });
        
        // 处理完成事件
        document.addEventListener('pjax:complete', function() {
            setTimeout(function() {
                var currentUrl = window.location.href;
                var savedPos = savedScrollPositions[currentUrl];
                
                if (savedPos && savedPos.valid && savedPos.y > 10) {
                    console.log('PJAX完成 - 尝试恢复位置:', savedPos.y);
                    
                    // 分步滚动，确保生效
                    var attempts = 0;
                    var scrollInterval = setInterval(function() {
                        attempts++;
                        window.scrollTo(savedPos.x, savedPos.y);
                        
                        if (Math.abs(window.scrollY - savedPos.y) < 10 || attempts >= 5) {
                            clearInterval(scrollInterval);
                            console.log('滚动完成 - 最终位置:', window.scrollY, '目标位置:', savedPos.y);
                        }
                    }, 50);
                }
            }, 100);
        });
        
        // 改进的popstate处理
        window.addEventListener('popstate', function(event) {
            setTimeout(function() {
                var currentUrl = window.location.href;
                var savedPos = savedScrollPositions[currentUrl];
                
                if (savedPos && savedPos.valid && savedPos.y > 10) {
                    console.log('POPSTATE - 恢复位置:', savedPos.y);
                    
                    var attempts = 0;
                    var scrollInterval = setInterval(function() {
                        attempts++;
                        window.scrollTo(savedPos.x, savedPos.y);
                        
                        if (Math.abs(window.scrollY - savedPos.y) < 10 || attempts >= 5) {
                            clearInterval(scrollInterval);
                            console.log('Popstate滚动完成');
                        }
                    }, 50);
                }
            }, 150);
        });
        
        // 确保浏览器使用自动滚动恢复
        if (window.history && window.history.scrollRestoration) {
            window.history.scrollRestoration = 'auto';
            console.log('设置历史记录滚动恢复: auto');
        }
        
        console.log('=== 改进方案加载完成 ===');
    })();
    </script>
    <?php
});

iro_action_operator();```

[github-actions]

@Yue-Sui，感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[Lightalso]

我用AI生成了一个插件版本，可以直接当作插件使用，避免对主题文件的修改
文件位置wp-content/plugins/pjax-scroll-restore.php

这个插件会以网页相对路径为键值维护一张全局滚动位置记录表，每个滚动位置对应一个有效位，pjax:send仅在滚动位置无效时保存位置，pjax:complete在滚动位置有效时恢复位置并使滚动位置失效

<?php
/**
 * Plugin Name: PJAX Scroll Restore
 * Description: 使用 PJAX 返回页面时保持原先的滚动条位置，通过相对路径区分，每条记录只恢复一次。
 * Version: 1.4
 * Author: Copilot
 */

if (!defined('ABSPATH')) { exit; }

class PJAX_Scroll_Restore {
    public function __construct() {
        add_action('wp_enqueue_scripts', [$this, 'inject_script'], 99);
    }

    public function inject_script() {
        $script = <<<JS
(function() {
    const SCROLL_TARGET_SELECTOR = null; // null 表示使用 window
    const MAX_RESTORE_ATTEMPTS = 30;
    const RESTORE_INTERVAL_MS = 50;
    const HEIGHT_MARGIN = 2;

    const scrollPositions = new Map();
    let targetEl = null;

    function getRelativePath() {
        return window.location.pathname + window.location.search;
    }

    function getScrollTarget() {
        if (SCROLL_TARGET_SELECTOR) {
            const el = document.querySelector(SCROLL_TARGET_SELECTOR);
            return el || document.scrollingElement || document.documentElement;
        }
        return window;
    }

    function getScrollY() {
        if (SCROLL_TARGET_SELECTOR && targetEl) return targetEl.scrollTop;
        return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }

    function getScrollHeight() {
        if (SCROLL_TARGET_SELECTOR && targetEl) return targetEl.scrollHeight;
        const se = document.scrollingElement || document.documentElement;
        return se.scrollHeight;
    }

    function scrollToY(y) {
        if (SCROLL_TARGET_SELECTOR && targetEl) {
            targetEl.scrollTop = y;
        } else {
            window.scrollTo(0, y);
        }
    }

    function ensureManualHistoryRestore() {
        if ('scrollRestoration' in history) {
            try { history.scrollRestoration = 'manual'; } catch (e) {}
        }
    }

    document.addEventListener('pjax:send', function() {
        targetEl = getScrollTarget();
        ensureManualHistoryRestore();
        const path = getRelativePath();
        const pos = getScrollY();
        const record = scrollPositions.get(path);

        if (record && record.valid) return;
        scrollPositions.set(path, { pos: pos, valid: true });
    });

    document.addEventListener('pjax:complete', function() {
        targetEl = getScrollTarget();
        ensureManualHistoryRestore();
        const path = getRelativePath();
        const record = scrollPositions.get(path);

        if (!record || !record.valid) return;

        let attempts = 0;
        function tryRestore() {
            attempts++;
            const height = getScrollHeight();
            if (height >= record.pos + HEIGHT_MARGIN) {
                scrollToY(record.pos);
                const current = getScrollY();
                if (Math.abs(current - record.pos) <= 1) {
                    record.valid = false;
                    scrollPositions.set(path, record);
                    return;
                }
            }
            if (attempts < MAX_RESTORE_ATTEMPTS) {
                setTimeout(tryRestore, RESTORE_INTERVAL_MS);
            } else {
                scrollToY(record.pos);
                record.valid = false;
                scrollPositions.set(path, record);
            }
        }
        requestAnimationFrame(tryRestore);
    });

    document.addEventListener('pjax:success', function() {
        const evt = new Event('pjax:complete');
        document.dispatchEvent(evt);
    });
})();
JS;
        wp_register_script('pjax-scroll-restore', '', [], false, true);
        wp_enqueue_script('pjax-scroll-restore');
        wp_add_inline_script('pjax-scroll-restore', $script);
    }
}

new PJAX_Scroll_Restore();

[LunaSpica]

我使用Gemini3生成了以下代码,在"iro主题设置-全局设置-页尾设置-页尾附加代码"中插入以下代码问题也可以解决:

<script type="text/javascript">
(function() {
    // --- 配置区域 ---
    // 禁用浏览器自带的滚动恢复（防止冲突）
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }

    // --- 变量定义 ---
    var isLocked = false; // 锁定标记：跳转期间禁止更新记录
    var isBack = false;   // 标记是否为后退操作
    var scrollTimer = null;

    // 获取当前URL对应的存储Key
    function getKey() {
        return 'suiyue_scroll_' + window.location.href;
    }

    // --- 核心逻辑 1: 浏览时实时记录位置 (防抖) ---
    window.addEventListener('scroll', function() {
        // 如果处于跳转锁定状态，绝对不要保存，防止张冠李戴
        if (isLocked) return;

        // 防抖处理：停止滚动 50ms 后才保存，节省性能
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(function() {
            sessionStorage.setItem(getKey(), window.scrollY);
        }, 50);
    });

    // --- 核心逻辑 2: 拦截跳转开始 ---
    // 监听 PJAX 开始 / 点击链接 / 后退
    var lockHandler = function() {
        isLocked = true; // 立即锁定！现在的滚动条位置不再属于新URL
    };
    document.addEventListener('pjax:send', lockHandler);
    document.addEventListener('pjax:start', lockHandler); // 兼容不同 PJAX 版本
    
    window.addEventListener('popstate', function() {
        isLocked = true; // 也就是在这里，地址变了但试图没变，必须锁死
        isBack = true;   // 标记这是后退
    });

    // --- 核心逻辑 3: 跳转完成后的恢复 ---
    document.addEventListener('pjax:complete', function() {
        var targetScroll = 0;
        
        // 如果是后退：从内存读取该页面的历史位置
        if (isBack) {
            var saved = sessionStorage.getItem(getKey());
            if (saved) {
                targetScroll = parseInt(saved);
            }
        } else {
            // 如果是新点击文章：强制归零（Sakurairo 默认可能会下滚，这里强制回顶）
            targetScroll = 0; 
        }

        // --- 执行滚动 (强力覆盖) ---
        // 1. 立即尝试
        // 停止可能存在的 jQuery 动画
        if (window.jQuery) window.jQuery('html,body').stop(true, false);
        window.scrollTo(0, targetScroll);

        // 2. 稍微延迟再次执行（防止 DOM 未加载完）
        setTimeout(function() {
            if (window.jQuery) window.jQuery('html,body').stop(true, false);
            window.scrollTo(0, targetScroll);
            
            // 解除锁定，开始记录新页面的滚动
            isLocked = false; 
            isBack = false;
        }, 50);
        
        // 3. 兜底修正 (针对图片加载慢导致的高度变化)
        setTimeout(function() {
            if (isBack && Math.abs(window.scrollY - targetScroll) > 50) {
                window.scrollTo(0, targetScroll);
            }
        }, 200);
    });

    // --- 页面首次加载初始化 ---
    // 防止刷新后没有记录
    sessionStorage.setItem(getKey(), window.scrollY);

})();
</script>

[github-actions]

这个 Issue 已经 30 天没有任何活动了，将被标记为过时 stale。删除 stale 标签或评论，否则将在 7 天内关闭。