Reputation: 11
I have a small snippet of code to produce a smooth scroll to anchor tags and back again. My site design has a fixed header of height 170px. So to compensate for this the java has been modified as below.
var jump=function(e)
{
e.preventDefault();
var target = $(this).attr("href");
$('html,body').animate(
{
scrollTop: $(target).offset().top-170 // modification
},1000,function()
{
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
This code works perfectly in Chrome and Safari, but in IE & Firefox it scrolls to the intended location and jumps 170px further down the page.
Any ideas?
Thanks, Dan
Upvotes: 1
Views: 4259
Reputation: 16591
The problem is that when your animation finishes, you set location.hash
which makes the browser jump to the anchor. As a simple workaround, don't prevent the hash change on the click, save the current scroll position instead. That way your browser would jump to the hash straight away.
To animate the whole thing, you can catch the hashchange
event, and immediately jump back where you've left off and animate the transition to your heart's content.
Older browsers might experience some flicker, see if it's accaptable for you, worth a try.
var scrollFrom = 0;
$('a[href*=#]').click(function(e){
scrollFrom = $(window).scrollTop();
});
$(window).bind('hashchange',function(){
$(window).scrollTop(scrollFrom);
var target = '#' + location.hash.replace(/#/,'');
$('html,body').animate({
scrollTop: $(target).offset().top-170 // modification
},1000);
});
Alternatively you can do it your way, just prefix the actual IDs of your anchors in the markup to prevent the browser automatically jumping there, then add the prefix to the clicked hash to locate the element with a selector.
Also see @fudgey's answer for cleaning up your 'html,body'
selector.
Upvotes: 2
Reputation: 86483
There are two problems I see:
$('html,body')
for scrolling. Opera seems to treat both as separate elements, so you will see the page scroll twice. Here is a nice cross-browser fix. Upvotes: 0