Laravel 8 同页面锚点滚动时路由变更问题如何解决？

实现原理 #

你原来的代码会修改地址栏，是因为a标签的href属性指定锚点时，默认行为就是将锚点追加到当前URL末尾，同时触发页面滚动。只要阻止该默认行为，手动调用滚动API即可保留原始URL。

方案1：原生JS实现（推荐） #

第一步：修改HTML（Blade）代码 #

给导航链接新增自定义属性存储目标元素ID，移除href中的锚点值：

<li class="nav-item">
   <a class="nav-link scroll-link" data-target="ask_for_help" href="#">Ask for Help</a>
</li>
<div id="ask_for_help">
   我想要跳转到达的段落内容。
</div>

第二步：添加JS逻辑 #

如果是Laravel项目，可以将以下代码放在公共JS文件中，或者通过Blade的@push指令注入到当前页面：

document.querySelectorAll('.scroll-link').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为，避免修改地址栏
    e.preventDefault();
    const targetId = this.dataset.target;
    const targetEl = document.getElementById(targetId);
    if (targetEl) {
      // 平滑滚动到目标元素，不需要平滑效果可以删除behavior参数
      targetEl.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

Blade模板注入示例：

{{-- 当前页面模板 --}}
@push('scripts')
<script>
// 上面的JS代码放这里
</script>
@endpush

确保你的布局模板中存在对应的栈输出：

{{-- 布局模板中body标签结束前 --}}
@stack('scripts')

方案2：极简内联实现（不需要额外JS文件） #

如果只有少量滚动需求，可以直接写在内联事件中：

<li class="nav-item">
   <a class="nav-link" href="javascript:void(0)" onclick="document.getElementById('ask_for_help').scrollIntoView({behavior:'smooth'})">Ask for Help</a>
</li>

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