On my site I have a switch and JQuery fade in fade out when I click on ‘Updates’ or ‘Projects’. Problem is that if I have scrolled down the page a little before clicking one of them, the page jumps back to top on clicking these options. I would like to eliminate that jump to the top. How can I do that? Thanks
Add
return false;
to your .click function
$('#projects-switch').click(function(){
setCurrentMenuTo($(this));
slideTabToCurrentMenuItem();
$('.home-updates').fadeOut('slow',function(){
$('.home-sheets').fadeIn('slow');
});
return false;
});
Changed it but still showing the same behaviour.
Take a look at your fadeOut and fadeIn parts. Temporarily disable the fadeIn part and you will see precisely why the page performs the jump.
Ok I’ve disabled it but I can’t see what is causing the jump anyway.
Why it’s happening is that once the content has been faded out, the remainder of the page is less than the full height of the screen. Therefore, no scrollable position is capable of being kept.
One solution to this is to use a different fading technique, where both sections of content are absolutely positioned on the page at the same location, so that you can fade one out to nearly 0, fade the other in, then completely fade out the first.
Thanks I understand the dynamics of what’s happening now, I’ll probably leave it is at is then as it’s a minor annoyance anyway. Thanks again.
this should be easily fixed with an ‘internal anchor’.
Set an anchor right above the tabbed area:
<a name="stop-going-to-the-top">some text, if you want hide it with css</a>
And make the tab anchors link to it:
<a href="#stop-going-to-the-top">Tab text</a>
<a name="stop-going-to-the-top">some text, if you want hide it with css</a>
<ul id="sliding-menu" class="labels">
<!-- SWITCH FOR HOME PAGE -->
<li class="current-menu-item">
<span id="projects-switch">
<a href="#stop-going-to-the-top">Projects</a>
</span>
</li>
<li>
<span id="updates-switch">
<a href="#stop-going-to-the-top">NEWS</a>
</span>
</li>
</ul>
Also it’s odd that what ever JS you are using is essentially refreshing the page for it to jump.
possibly try another tabbing script?
I think that you may be misunderstanding his problem. No refresh is occurring. Instead, with his existing hide then show script, there is not enough content left on the page during the hiding part of the process. That is what removes the scrollbars, and also removes any prior scrolled position. Then when the other content is shown, the pare remains at the same unscrolled position that it was at.
Ahh ok, I thought it was odd. just didn’t realise it hides and then shows, just looked like a refresh.
Anyways.
In that case put the <a name=“xxxx”></a> below the tabbed box.
OR
The content seems to always be inside a container that should stay the same size.
Wrap it all inside a containing div with a set height that way, that element will always be present, the page will stay the same size and the scroll bar won’t disappear, eliminating the jump to top.
May seem like a minor annoyance for you as you’ve seen it so often but as a new visitor, someone may find it annoying, give up and leave the site…
I think that a jump would still occur in the scrolling with that one
With that solution, there will always be a gap underneath the smaller piece of content.
Even if the OP decides to not implement any of our solutions, do you see any issues with this potential solution, which is:
to use a different fading technique, where both sections of content are absolutely positioned on the page at the same location, so that you can fade one out to nearly 0, fade the other in, then completely fade out the first.
The whole container though looks to always be the same size…
If everything from above the tabs to below the part that fades in and out was inside a set height container it’ll work completly fine, no gaps would occur if that containing div was only placed anywhere the tabs were…
Also for them to be absolutely positioned properly they’d need to be inside a containing div that wasn’t the body or a whole page wrapper as this could cause usability issues with different screen sizes.
Usually though things like this are inside containers with set heights that aren’t affected by fades etc because of things like this current issue.
not completly fading would also work but a little more work than just a wrapping div.