求助：如何通过JavaScript实现滚动时修改网站URL？

一、先纠正你找到的滚动检测代码 #

你提供的代码多了个多余的}，正确的滚动监听写法应该针对页面整体（window对象）绑定事件，因为通常我们要监听的是整个页面的滚动行为。

二、完整实现步骤 #

1. 监听页面滚动事件

用window.onscroll绑定滚动触发的函数，代码如下：

window.onscroll = function() {
  // 滚动时要执行的操作写在这里
  changePageURL();
};

2. 编写修改URL的函数

我们用HTML5的history.pushState或replaceState来修改URL，这两个方法不会刷新页面，只是修改地址栏内容，适合站内页面跳转需求：

• pushState：会在浏览器历史记录里新增一条，用户点后退能回到原来的页面
• replaceState：替换当前的历史记录，后退不会回到原来的页面

函数代码示例：

function changePageURL() {
  // 把这里改成你要跳转的站内页面路径，比如 "/about.html"
  const targetPath = "/your-target-page.html";
  // 使用pushState修改URL（保留历史记录）
  window.history.pushState({}, "", targetPath);
  // 要是不想保留历史记录，就换成下面这句
  // window.history.replaceState({}, "", targetPath);
}

3. 优化：避免重复触发（可选）

如果不想用户一滚动就反复修改URL，可以加滚动距离判断，并且触发一次后就移除监听：

window.onscroll = function() {
  // 当页面向下滚动超过100px时触发
  if (window.scrollY > 100) {
    changePageURL();
    // 移除滚动监听，防止重复执行
    window.onscroll = null;
  }
};

三、完整代码示例 #

把这段代码放在HTML页面的</body>标签之前（确保页面加载完成后再执行）：

<script>
function changePageURL() {
  const targetPath = "/your-target-page.html"; // 替换成你的目标页面路径
  window.history.pushState({}, "", targetPath);
}

window.onscroll = function() {
  // 滚动超过100px时触发一次URL修改
  if (window.scrollY > 100) {
    changePageURL();
    window.onscroll = null;
  }
};
</script>

注意事项 #

• 目标URL必须是站内路径，不能是其他网站的地址，否则浏览器会阻止操作
• 如果是监听某个特定元素的滚动（比如带滚动条的div），把window换成该元素的选择器即可，比如document.getElementById('scroll-box').onscroll = ...

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