如何在Bolero F#单页应用切换路由时让锚点生效

现有代码情况 #

导航栏HTML模板 #

<a href="${Page1Link}" class="navbar-brand">Page1</a>

...
<div class="collapse navbar-collapse" id="navmenu">
  <ul class="navbar-nav ms-auto">
    <li class="nav-item">
      <a href="${Page1Link}#section1" class="nav-link">Section1</a>
    </li>
    <li class="nav-item">
      <a href="#section1" class="nav-link">Section1</a>
    </li>
    <li class="nav-item">
      <a href="${Section1Link}" class="nav-link">Section1</a>
    </li>
    <li class="nav-item">
      <a href="${Page2Link}" class="nav-link">Page2</a>
    </li>
  </ul>
</div>

F#页面路由定义 #

type Page =
    | [<EndPoint "/page1">] Page1
    | [<EndPoint "/page1#section1">] Section1
    | [<EndPoint "/page2">] Page2

已实现的滚动函数 #

<script>
      window.scrollToSection = function (sectionId) {
          var element = document.getElementById(sectionId);
          if (element) {
              element.scrollIntoView({ behavior: "smooth" });
          }
      };
</script>

当前问题 #

• 从Page2切换到Page1时，无法自动滚动到section1
• #section1仅在Page1内部点击有效，跨页跳转后不触发滚动
• ${Section1Link}只能完成页面切换，不会触发滚动
• ${Page1Link}#section1效果等同于#section1，跨页场景下无效

解决方案 #

1. 调整路由定义 #

将锚点从路由端点中分离，路由系统通常仅处理路径部分，锚点由前端单独处理：

type Page =
    | [<EndPoint "/page1">] Page1
    | [<EndPoint "/page1">] Section1 // 移除端点中的#section1
    | [<EndPoint "/page2">] Page2

2. 修改导航链接 #

把需要跨页滚动的链接改为调用自定义JS函数，替代原生href跳转：

<li class="nav-item">
  <a href="javascript:void(0)" onclick="navigateAndScroll('${Page1Link}', 'section1')" class="nav-link">Section1</a>
</li>

3. 扩展JS逻辑，处理跳转+滚动 #

更新JS代码，实现页面跳转后自动触发滚动，同时兼容直接访问带锚点的URL：

<script>
// 处理路由跳转并触发滚动
window.navigateAndScroll = function(pageUrl, sectionId) {
    window.location.href = pageUrl;
    // 页面加载完成后执行滚动
    window.addEventListener('load', function scrollHandler() {
        scrollToSection(sectionId);
        // 移除监听避免重复执行
        window.removeEventListener('load', scrollHandler);
    });
};

// 原滚动函数保留
window.scrollToSection = function (sectionId) {
    var element = document.getElementById(sectionId);
    if (element) {
        element.scrollIntoView({ behavior: "smooth" });
    }
};

// 处理页面初始化时的锚点（比如直接访问/page1#section1）
window.addEventListener('load', function() {
    const hash = window.location.hash.slice(1);
    if (hash) {
        scrollToSection(hash);
    }
});
</script>

4. 框架级处理（针对Fable项目） #

如果使用Fable这类F#前端框架，可以利用路由切换的回调事件，在页面渲染完成后触发滚动：

// 示例：Fable.React Router的路由变更监听
Router.onUrlChanged(fun url ->
    match url with
    | Section1 ->
        // 延迟执行确保DOM已渲染完成
        JS.setTimeout (fun () -> JS.window.scrollToSection("section1")) 100 |> ignore
    | _ -> ()
)

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