Запрет прокрутки вверх при нажатии на вкладку - PullRequest
Новая
       29

Запрет прокрутки вверх при нажатии на вкладку

0 голосов
/ 09 марта 2019

Пользователь может нажимать на вкладки, фильтруя задания на моей странице по категориям.Когда пользователь нажимает на вкладку, страница попадает в поиск (я использую гем pg_search).

Проблема: при нажатии на вкладку страница перезагружается и прокручивается вверх.Это очень плохо для моего UX.Как я могу предотвратить прокрутку вверх и сохранить высоту табуляции-баннера вместо этого?

Вот мой файл 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>

1 Ответ

0 голосов
/ 09 марта 2019

Как сказал Макс, вы можете использовать якоря как быстрое решение. Добавьте идентификатор в 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>
...