CODEWITHSUNDEEP
jquerycss
Scott
Scott

Reputation: 172

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

Upvotes: 2

Views: 307

Answers (2)

uber5001
uber5001

Reputation: 3974

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.

Upvotes: 0

Ryan
Ryan

Reputation: 1338

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

Upvotes: 3

Related Questions