Q:

expanding fixed header, resets scroll position on the page

I have a fixed header. When you click a button in the header, I have the bottom expand to reveal more content. However, if you have already scrolled down the page some, clicking the button resets the scroll position to the top of the page.
I made a jsfiddle to demonstrate the effect: http://jsfiddle.net/YeW9L/ 
$(document).ready(function () {
    $('.action').click(function () {
        $('#border').animate({
            height: 200
        }, 400);
    });
});

I thought that by making the header fixed, it removes it from the flow of content. So I don't understand why changing it's height should affect rest of the page at all. Does anyone have a solution to this? I would like the page scroll position to stay as is no matter where on the page you are when the header is expanded.
Thanks

A:

You need to prevent the default click handler running.
http://jsfiddle.net/YeW9L/1/
$(document).ready(function () {
    $('.action').click(function (e) {
        e.preventDefault();
        $('#border').animate({
            height: 200
        }, 400);
    });
});

