2

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

2 Answers 2

3

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);
    });
});
0
0

I think what is happening is that the <a> tag is linking to the same page.

To prevent this, you can set href="javascript:void(0)" to keep the cursor: pointer; effect provided by the <a> tag.

If you'd rather not do that, you can remove the href attribute altogether and just apply the cursor: pointer; manually.

Or you can just go with Ryan Pilbeam's answer. That one works well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.