You basically need to do this:
- include the target hash into the link pointing to the other page (
href="other_page.html#section") - in your
readyhandler clear the hard jump scroll normally dictated by the hash and as soon as possible scroll the page back to the top and calljump()– you’ll need to do this asynchronously - in
jump()if no event is given, makelocation.hashthe target - also this technique might not catch the jump in time, so you’ll better hide the
html,bodyright away and show it back once you scrolled it back to zero
This is your code with the above added:
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},2000,function()
{
location.hash = target;
});
}
$('html, body').hide();
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show();
jump();
}, 0);
}else{
$('html, body').show();
}
});
Verified working in Chrome/Safari, Firefox and Opera. I don’t know about IE though.