Anchor links to start below the header which is fixed at the top

Question

I have a page which has a fixed header at the top, which is 63px in height. below this I have different sections of the page (divs) which are in essence separate pages. Each sec

Answer 1

Building on Muhammed Bhikha's solution, you can avoid extra markup entirely by applying it to the ::before element of whatever elements you want to use as anchor targets. For instance, this version uses a ::before pseudo-element on all elements with an id and all a elements with a name (e.g., the usual targets). (You may want to narrow that down with a class, depending on whether you're using ::before for something else on [say] some elements with ids.)

a[name]::before,
[id]::before {
    content: '';
    display: block;
    visibility: hidden;
    height: 63px;      /* this is the height of your header */
    margin-top: -63px; /* this is the height of your header, negated */
}

Example:

header {
    position: fixed;
    min-height: 63px;
    top: 0;
    width: 100%;
    height: 63px;
    background-color: blue;
}

main {
    margin-top: 63px;
}

a[name]::before,
[id]::before {
    content: '';
    display: block;
    visibility: hidden;
    height: 63px;      /* this is the height of your header */
    margin-top: -63px; /* this is the height of your header, negated */
}

    Header



    
One
    
Two
    
Three
    
Four
    
Five

One: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Three: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Four: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Five: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.