单击选项卡时防止滚动到顶部
Prevent scrolling to top when click tab
用户可以单击选项卡,按类别过滤我页面上的职位。
当用户单击选项卡时,页面会进行搜索(我使用 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>
正如 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>
用户可以单击选项卡,按类别过滤我页面上的职位。 当用户单击选项卡时,页面会进行搜索(我使用 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>
正如 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>