单击选项卡时防止滚动到顶部

Question

用户可以单击选项卡，按类别过滤我页面上的职位。当用户单击选项卡时，页面会进行搜索（我使用 pg_search gem）。

问题：单击选项卡时，页面会重新加载并滚动到顶部。这对我的用户体验非常不利。如何防止滚动到顶部并保持标签横幅的高度？

这是我的 html.erb 文件：

<div class="tabs-banner">
  <div class="tabs">
    <a class="tab active" href="/vacancies?utf8=✓&query=">
      <h2 style="color:white;"><br>All Jobs</h2>
    </a>
    <a class="tab" href="/vacancies?utf8=✓&query=developer">
      <h2><br>Developer</h2>
    </a>
    <a class="tab" href="/vacancies?utf8=✓&query=marketing">
      <h2><br>Marketing</h2>
    </a>
    <a class="tab hidden-xs" href="/vacancies?utf8=✓&query=design">
      <h2><br>Design</h2>
    </a>
    <a class="tab hidden-xs" href="/vacancies?utf8=✓&query=finance">
      <h2><br>Finance</h2>
    </a>
    <a class="tab hidden-xs" href="/vacancies?utf8=✓&query=internships">
      <h2><br>Internships</h2>
    </a>
  </div>
</div>

Answer 1

正如 max 所说，您可以使用锚点作为快速修复。将 id 添加到 tabs-banner div 并在链接中使用它

<div class="tabs-banner" id="category-tabs">
  <div class="tabs">
    <a class="tab active" href="/vacancies?utf8=✓&query=#category-tabs"">
      <h2 style="color:white;"><br>All Jobs</h2>
    </a>
    # all other tabs
  </div>
</div>

单击选项卡时防止滚动到顶部

Prevent scrolling to top when click tab

ruby-on-rails

scroll

pg-search