如何在SPF.js导航至新URL后保持页面当前滚动位置

我之前在使用SPF.js做类单页导航的时候也遇到过一模一样的问题，刚好可以给你分享下解决方案：

一、使用SPF.js内置配置直接禁用自动滚动 #

SPF.js的spf.navigate()方法本身支持配置参数来控制滚动行为，不需要额外自定义。你只需要在调用时传入第二个参数options，设置scroll: false就能保留当前页面的滚动位置，不会自动跳转到顶部：

// 调用时添加scroll配置
spf.navigate('/target-url', { scroll: false });

这个参数的默认值是true，也就是导航后自动滚动到页面顶部，把它设为false就会维持当前的滚动状态。

二、自定义滚动位置的精细控制（进阶） #

如果你的场景更复杂，比如需要记录某个页面的滚动位置，下次回到该页面时自动恢复，可以结合SPF的状态管理和事件监听来实现：

1. 导航前保存滚动位置
   监听spf:navigate事件，在导航触发前记录当前的滚动Y值，存在SPF的全局状态里：

   document.addEventListener('spf:navigate', () => {
     // 保存当前滚动位置到SPF状态
     spf.state.set('lastScrollY', window.scrollY);
   });
   

2. 页面加载后恢复滚动位置
   监听spf:load事件，在新内容加载完成后读取之前保存的滚动值并恢复：

   document.addEventListener('spf:load', () => {
     const savedScrollY = spf.state.get('lastScrollY');
     if (savedScrollY !== undefined) {
       window.scrollTo(0, savedScrollY);
       // 可选：恢复后清除状态，避免其他页面误触发
       spf.state.set('lastScrollY', undefined);
     }
   });
   

如果需要针对特定URL做滚动恢复，可以在spf:load事件里判断当前页面的URL，再决定是否恢复位置。

关于表述的小建议 #

你的问题描述已经很清晰啦，要是想更精准的话，可以把“类单页应用的快速导航功能”调整为“基于SPF.js实现类单页应用的无刷新加载导航功能”，这样能更明确突出SPF.js核心的无刷新加载特性~

内容的提问来源于stack exchange，提问作者nakorndev