CODEWITHSUNDEEP
javascripthtmlcssoffset
Matthew James Morris
Matthew James Morris

Reputation: 93

Offsetting page anchor from fixed header

I have looked at other posts for this issue but alass none have worked so here i am.

Im trying to make my header(position is fixed) link to a page anchor but when i press the link it goes past the top of the div and the header for it. So to see the entire div including header then you need to scroll up.

I have got a Fiddle of it here

.wrapper {
width: 100%;
height: 1000px;
margin: 130px auto;
padding: 0;
background-color: aliceblue;}

Upvotes: 0

Views: 1082

Answers (2)

Chase
Chase

Reputation: 2304

You can just use CSS. Just make standalone hidden anchor elements and clip them the height of your header.

Here is the anchor class I used:

a.anchor {
 display: block;
 position: relative;
 top: -250px;
 visibility: hidden;
    height:0px;
}

JSFiddle(I only did the first few links): http://jsfiddle.net/pp9dg/29/

Upvotes: 2

chdltest
chdltest

Reputation: 873

Here's an updated fiddle: http://jsfiddle.net/pp9dg/28/

It uses jquery which offsets the anchor point by 200px.

$(window).on("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 200);
});

Upvotes: 1

Related Questions