jQuery Tabs-防止锚点在单击时将页面滚动到顶部

Question

I have set up a fiddle which demonstrates my issue ( http://jsfiddle.net/PR2Yn/ ). I tried the prevent function, but to no avail.

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

Specifically, the news tabs at the bottom of the page jumps to the top of the page when they are clicked. This is fine as long as you have not scrolled down, but if you have scrolled down causes an issue as you have to continually find where you were.

Answer 1

You need to define

href='javascript:void(0);'

instead of

 href='#'

in all the anchor tags surrounding news image and content.

If you define href='#' in anchor, it will add # at the end of the url of your page and jumps up.

Answer 2

Looking at your fiddle, it seems the problem you are having is not the usual jump/scroll (by the browser in response to an onclick event handler), but rather a problem with the tabs: every tab that is opened, the previously clicked one (even if clicked to close it) also opens. You can see this by doing the following:

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.

I thought this was being caused by some issue in your javascript code or HTML, but I could not find any problem. In a test, I deleted most of your javascript and HTML, maintaining only a very basic easytabs call, and the problem persisted.

So I thought the problem might be with the easyResponsiveTabs.js plugin itself. So I changed the external resource in a fiddle, using the one used by the "official" easyResponsiveTabs example page and the problem is gone. You can see your tabs working here: http://jsfiddle.net/8gWe9/

In sum, it looks like the problem is with the easyResponsiveTabs.js you are using, though I have not checked that in detail. It could be caused by using an old version of it, but it could also be caused by a problem with your web server not delivering the .js file correctly.