Turbo/Rails 7.1中303重定向丢失锚点无法滚动定位问题求助

问题现象 #

在Turbo/Rails（7.1）应用里，使用redirect_to并指定:see_other状态时，Turbo无法识别URL中的anchor参数。原本预期页面会自动滚动到锚点位置，但因为fetch()的不透明重定向机制，锚点丢失，页面最终停留在顶部。

这个问题在GET和PATCH（POST）请求中都会出现，典型场景：

• 使用turbo_method: :patch的link_to生成链接
• 控制器处理请求后，携带锚点重定向到目标页面
• 重定向完成，但锚点失效，页面没有滚动到对应位置

这类问题在通知功能里特别棘手：比如用户点击讨论帖的通知（通过PATCH请求标记为已读），之后需要重定向到对应的评论位置，但锚点丢失导致无法定位。

预期流程应该是：点击链接后，通过带锚点的redirect_to完成重定向，用户进入页面时自动滚动到对应ID的锚点元素。

问题根源 #

经调试Turbo代码确认，问题出在fetch()的不透明重定向机制上——重定向过程中锚点信息被丢弃，Turbo无法获取到锚点参数来执行滚动操作。

应用层面的临时解决办法 #

方案1：通过Flash + Turbo事件手动处理锚点 #

在控制器重定向时，同时用Flash传递锚点ID：

# 控制器代码
redirect_to post_path(@post, anchor: "comment_#{@comment.id}"), 
            status: :see_other, 
            flash: { scroll_to: "comment_#{@comment.id}" }

在布局文件中添加meta标签渲染Flash内容：

# app/views/layouts/application.html.erb
<% if flash[:scroll_to] %>
  <meta name="scroll-to" content="<%= flash[:scroll_to] %>">
<% end %>

然后在应用JS中监听turbo:load事件，读取锚点并执行滚动：

// app/javascript/application.js
document.addEventListener('turbo:load', () => {
  const scrollToId = document.querySelector('meta[name="scroll-to"]')?.content;
  if (scrollToId) {
    const targetElement = document.getElementById(scrollToId);
    targetElement?.scrollIntoView({ behavior: 'smooth' });
    // 清除Flash避免重复触发
    fetch('/clear_scroll_flash', {
      method: 'POST',
      headers: { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content }
    });
  }
});

最后添加清除Flash的控制器动作：

# 可放在对应资源控制器或单独控制器中
def clear_scroll_flash
  flash.delete(:scroll_to)
  head :ok
end

方案2：用Turbo Streams替代重定向 #

如果业务场景允许，直接通过Turbo Streams更新页面并触发滚动，绕过重定向环节：

# 控制器代码
respond_to do |format|
  format.turbo_stream do
    render turbo_stream: [
      turbo_stream.update(:notification_container, partial: 'notifications/marked_read'),
      turbo_stream.append('page_scripts', "<script>document.getElementById('comment_#{@comment.id}').scrollIntoView({behavior: 'smooth'})</script>")
    ]
  end
end

方案3：强制使用非Turbo请求 #

在link_to中添加data: { turbo: false }，用传统HTTP请求替代Turbo的fetch请求，这样重定向的锚点就能正常生效：

<%= link_to '标记已读并跳转', mark_read_notification_path(notification), 
            method: :patch, 
            data: { turbo: false } %>

注意：该方案会失去Turbo的无刷新特性，适合对页面刷新不敏感的场景。

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