I have implemented a "Skip to content" link at the top of my website using the following markup:
<a href="#content" id="skip-to-content">Skip to content</a>
The link is initially placed outside the viewport with CSS position: absolute. When the link is focused (by tabbing through the page), it moves back into the viewport and pushes the content down to make space.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
Clicking the link successfully skips to the content, but then the link loses focus causing the content to move up slightly. This results in users needing to scroll up to see the beginning of the content. It appears that the anchor link is skipping too far down.
Is there a way to ensure that the link always skips directly to the content without leaving any extra space?
Please refrain from suggesting JavaScript solutions as this functionality should work across all browsers. Thank you for your assistance.
— André