如何阻止点击分类标签页时页面滚动到顶部？（Rails+pg_search）

嘿，这个问题我碰到过！你现在用的是普通<a>标签直接跳转，触发了完整的页面刷新，浏览器默认就会滚回顶部。下面给你几个适配Rails项目的解决方案，按推荐程度排好啦：

方案1：用Rails Turbo（首推，Rails 7+默认自带） #

Turbo是Rails官方推的工具，能实现无刷新页面更新，完美解决滚动跳转的问题，改起来超简单：

1. 先确认你的项目已经加载了Turbo——Rails 7新项目默认已经有，老项目的话可以加gem 'turbo-rails'，然后跑bundle install和rails turbo:install搞定。
2. 给所有标签链接加上data-turbo="true"（其实Turbo默认会拦截<a>标签，但明确加上更稳妥），再给.tabs-banner加个id，比如id="job-tabs"，这样Turbo更新后会自动定位到这里：

修改后的HTML代码：

<div class="tabs-banner" id="job-tabs">
  <div class="tabs">
    <a class="tab active" href="/vacancies?utf8=✓&query=" data-turbo="true">
      <h2 style="color:white;"><br>All Jobs</h2>
    </a>
    <a class="tab" href="/vacancies?utf8=✓&query=developer" data-turbo="true">
      <h2><br>Developer</h2>
    </a>
    <!-- 其他标签都照这个格式改 -->
  </div>
</div>

3. 最后在VacanciesController的index方法里，给Turbo留好响应入口（如果想局部刷新职位列表的话体验更好）：

def index
  # 你的pg_search查询逻辑，比如：
  @vacancies = Vacancy.search(params[:query])
  
  respond_to do |format|
    format.html
    # 只更新职位列表容器，不用刷新整个页面
    format.turbo_stream { 
      render turbo_stream: turbo_stream.replace(
        'vacancies-container', 
        partial: 'vacancies/list', 
        locals: { vacancies: @vacancies }
      ) 
    }
  end
end

（这里假设你的职位列表放在id="vacancies-container"的容器里，用局部视图渲染，这样Turbo只会替换列表部分，用户几乎感觉不到页面变化~）

方案2：手动写AJAX处理（适合不想用Turbo的场景） #

如果不想依赖Turbo，自己写JS拦截点击事件也是个靠谱办法：

1. 先给所有标签加个共同类job-tab，方便JS选择：

<div class="tabs-banner" id="job-tabs">
  <div class="tabs">
    <a class="tab active job-tab" href="/vacancies?utf8=✓&query=">
      <h2 style="color:white;"><br>All Jobs</h2>
    </a>
    <a class="tab job-tab" href="/vacancies?utf8=✓&query=developer">
      <h2><br>Developer</h2>
    </a>
    <!-- 其他标签同理 -->
  </div>
</div>
<!-- 职位列表容器 -->
<div id="vacancies-container">
  <%= render @vacancies %>
</div>

2. 用Stimulus控制器写逻辑（Rails默认支持Stimulus，比直接写原生JS更优雅）：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 给每个标签绑定点击事件
    this.element.querySelectorAll('.job-tab').forEach(tab => {
      tab.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止默认跳转行为
        const targetUrl = tab.getAttribute('href');
        
        // 更新标签的激活状态
        this.element.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        
        // 用Fetch请求加载新的职位列表
        fetch(targetUrl, {
          headers: { 'Accept': 'text/html' }
        })
        .then(response => response.text())
        .then(html => {
          // 提取页面里的职位列表部分，替换掉当前容器的内容
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = html;
          const newVacancyList = tempDiv.querySelector('#vacancies-container').innerHTML;
          document.querySelector('#vacancies-container').innerHTML = newVacancyList;
          
          // 确保页面停在标签栏位置（可选，防止滚动偏移）
          document.querySelector('#job-tabs').scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      });
    });
  }
}

然后在HTML里绑定这个控制器：

<div class="tabs-banner" id="job-tabs" data-controller="job-tabs">
  <!-- 标签内容不变 -->
</div>

方案3：临时救急——锚点定位（最快实现，但体验一般） #

如果不想改太多代码，这个临时办法能快速解决：给.tabs-banner加个id，然后在所有链接的href末尾加#job-tabs，这样页面刷新后会自动滚回标签栏位置：

<div class="tabs-banner" id="job-tabs">
  <div class="tabs">
    <a class="tab active" href="/vacancies?utf8=✓&query=#job-tabs">
      <h2 style="color:white;"><br>All Jobs</h2>
    </a>
    <a class="tab" href="/vacancies?utf8=✓&query=developer#job-tabs">
      <h2><br>Developer</h2>
    </a>
    <!-- 其他标签都加上#job-tabs -->
  </div>
</div>

这个方法虽然简单，但还是会触发页面刷新，只是刷新后回到标签位置，体验不如前两种无刷新的方案，适合临时救急。

优先推荐方案1，Turbo是Rails官方标配，配置简单，用户体验也最好。要是老项目还没升级Turbo，方案2的AJAX方法也能完美解决问题~

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