Jump links and viewport positioning

Four methods for creating space above the target of a jump link.

A: Default

The default behaviour for within-page links. The target element is pressed right up against the top of the viewport.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, porttitor ac rhoncus eget, viverra in metus. Donec et elit massa, ut sollicitudin tellus. Nulla facilisi. Morbi et turpis nec augue fermentum feugiat.

B: Pseudo-element spacer.

Use a pseudo-element to add space at the beginning of the element.

Known support: IE8+, Firefox 3+, Opera 9.25+, Safari 3+, Chrome

Drawbacks

• Requires browser support for pseudo-elements
• Fails if the element has a background
• Fails if the element has top padding or border

#method-B:before {
    display: block;
    content: "";
    height: 50px;
    margin: -50px 0 0;
}

C: Padding, negative margins, and background-clip

Use padding to create the space, a negative margin to close the unwanted space between elements on the page, and background-clip to avoid issues with background-bleed.

Known support: Firefox 4.0+, Opera 10.6+, Safari 3+, Chrome

Drawbacks

• Requires browser support for background-clip content-box (if using a background)
• Interferes with standard use of margins (inc. margin-collapse)
• Prevents use of padding-top in element styling

#method-C {
    padding-top: 50px;
    margin-top: -50px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

D: Border, negative margins, and background-clip

Use a transparent border to create the space, a negative margin to close the unwanted space between elements on the page, and background-clip to avoid issues with background bleeding.

Known support: Firefox 1.0+, Opera 10.5+, Safari 3+, Chrome

Drawbacks

• Requires browser support for background-clip (if using a background)
• Interferes with standard use of margins (inc. margin-collapse)
• Prevents use of border-top in element styling

#method-D {
    border-top: 50px solid transparent;
    margin-top: -50px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

E: Method D + pseudo-element border mimickery

Same as method D but uses a pseudo-element to mimic a top-border. More information about the pseudo-border technique can be found in the article on Multiple Backgrounds and Borders with CSS 2.1

Known support: Firefox 3.5+, Opera 10.5+, Safari 3+, Chrome

Drawbacks

• Requires browser support for background-clip (if using a background)
• Requires browser support for pseudo-elements and their positioning (if using a border)
• Interferes with standard use of margins (inc. margin-collapse)

#method-E {
    position: relative;
    padding: 15px;
    border-top: 52px solid transparent;
    margin-top: -50px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#method-E:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc;
}

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis enim lorem, condimentum eu euismod quis, cursus eu sapien. Quisque hendrerit feugiat viverra. Nunc odio risus, egestas quis viverra non, rutrum id nulla. Etiam sed ipsum in urna tristique tristique. Fusce viverra, nisi nec porta tincidunt, nulla sapien cursus nisl, quis lobortis eros magna fringilla risus. Aenean eget interdum leo. Donec dictum risus id nibh rhoncus sed sollicitudin tellus vulputate. Donec quis rutrum ipsum. In sagittis, est ut posuere elementum, dui tellus viverra libero, non eleifend urna mi ut tellus. Nam eget mauris eu turpis adipiscing cursus ut eget quam. Ut egestas dapibus nisi, in tempor risus blandit id. Fusce fringilla rutrum volutpat. Morbi fringilla, ante sodales eleifend tincidunt, leo felis venenatis arcu, eget lobortis nisl nisi vulputate elit. Nullam sit amet tellus ipsum. Sed elit nunc, pellentesque eu dapibus in, tincidunt eget tortor. Proin viverra laoreet ligula at egestas. Sed et nulla quis ligula imperdiet lobortis at sed lectus.

Pellentesque ac risus magna. Cras viverra accumsan turpis eget gravida. Pellentesque pellentesque faucibus porttitor. Integer ut tempor lacus. Integer vitae nisl eu est porta vestibulum. Nam dui nunc, imperdiet eu congue vitae, mattis in erat. Aenean dolor est, tempus sit amet varius eu, molestie eget tellus. In velit urna, vulputate et porttitor ut, commodo nec nisi. Morbi sed erat auctor risus mollis volutpat. Fusce sed mauris eget enim hendrerit condimentum ut a sem. Etiam rhoncus luctus augue vitae vulputate.