jquery scrollTop offset issue

Question

I am trying to build an anchor link which allows Panel 2 to slide up to cover panel 1, but leave the black header visible:

http://jsfiddle.net/xMpu4/19/

I'm setting the offset with:

'scrollTop': $target.offset().top - 140

it does this for a milisecond and then jump to the top of the page.

How can I set it so that it stops in the right place?

Answer 1

It works exactly as you have it written:

$('html, body').stop().animate({
    'scrollTop': $target.offset().top - 140
}, 600, 'swing', function () {
    window.location.hash = target;
});

The first part animates the scrolling, and when that is finished, you tell the window to jump to a specific hash.

Notice what happens when your click function just has this:

window.location.hash = target;

Remove the callback function and it will prevent your page from jumping to the hash.

---

On an unrelated note, I would suggest that you don't use hard-coded values in your animation function. Try this instead:

'scrollTop': $target.offset().top - $("#a").offset().top;