Question

我已经设置了一个小提琴来演示我的问题（http://jsfiddle.net/PR2Yn/）。我试过了防止功能，但无济于事。

<div id="horizontalTab">
<ul class="resp-tabs-list">
    <li> <a href="#" class="accordionNav residents" tabindex="0">Residents<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav business" tabindex="0">Business<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav visitors" tabindex="0">Visitors<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav wealden247" tabindex="0">Wealden 24/7<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav payforit" tabindex="0">Pay for it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav applyforit" tabindex="0">Apply for it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav reportit" tabindex="0">Report it<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav planning" tabindex="0">Planning<div class="tri"></div></a> </li>
    <li> <a href="#" class="accordionNav bins" tabindex="0">Bins<div class="tri"></div></a> </li> 
    <li> <a href="#" class="accordionNav council" tabindex="0">Your Council<div class="tri"></div></a> </li> 
</ul>

具体来说，页面底部的新闻标签会在点击时跳转到页面顶部。只要你没有向下滚动就可以了，但是如果你向下滚动会导致问题，因为你必须不断地找到你所在的位置。

Answer 1

您需要定义

href='javascript:void(0);'

而不是

 href='#'

在围绕新闻图片和内容的所有锚标签中。

如果您在锚点中定义href ='＃'，它会在页面的网址末尾添加＃并跳转。

Answer 2

看着你的小提琴，看起来你遇到的问题不是通常的跳转/滚动（通过浏览器响应onclick事件处理程序），而是选项卡的问题：每个打开的选项卡，之前点击的一个（即使单击以关闭它）也会打开。您可以通过执行以下操作来查看此内容：

1) Click on "Residents" tab to open it;
2) Click on it again to close it;
3) Now scroll down and click on another tab (such as "Apply for it");
4) Then you will be scrolled up because, in fact, "Residents" is also reopened.

我认为这是由您的javascript代码或HTML中的某些问题引起的，但我找不到任何问题。在测试中，我删除了大部分的javascript和HTML，只保留了一个非常基本的easytabs调用，问题仍然存在。

所以我认为问题可能出在easyResponsiveTabs.js插件本身。所以我使用“官方”easyResponsiveTabs example page使用的那个改变了外部资源，问题就消失了。您可以在此处看到自己的标签：http://jsfiddle.net/8gWe9/

总而言之，问题在于您使用的easyResponsiveTabs.js，尽管我没有详细检查过。它可能是由于使用它的旧版本引起的，但也可能是由于您的Web服务器无法正确传送.js文件引起的。

jQuery选项卡 - 防止锚点单击时将页面滚动到顶部

2 个答案: