Prevent scrolling to top when click tab

A user can click tabs, filtering the jobs on my page by category. When a user clicks the tab, the page hits a search (I use the pg_search gem).

Problem: when clicking the tab, the page reloads and scrolls to the top. This is very bad for my UX. How do I prevent scrolling to top and keep on the height of the tabs-banner instead?

Here is my html.erb file:

<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>

As max said, you can use anchors as a quick fix. Add id to tabs-banner div and use it in the links

<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>