Bad Intra-Page Link Handling in Browsers

Intra-page links are hyperlinks that take you to a different place on the same page. The target of the link is supposed to be scrolled to the top of the screen. In most cases, this works fine. However, if there is only a small amount of text after the link target, browsers only scroll the screen so that the bottom of the document is at the bottom of the screen. This leaves the poor users wondering where in the page the link was meant to take them!

The ugly hack to make intra-page links to the end of the document work is to pad the end of the document with lots of paragraph (<p>) or break (<br>) tags. This causes the browser to render the document with a long empty space at the end, allowing it to scroll the final text to the top of the screen. However, this is a hack in the worst sense of the word. It clutters the end of the document with useless whitespace and increases download times. Furthermore, it is highly platform-dependent. Users with different screen resolutions, browser window sizes, and browser whitespace rendering algorithms see the same tags rendered as different amounts of vertical space. Those 16 break tags may let your last-line link target appear at the top of the window in one browser but not another. As a result, page authors must add excess whitespace or hope that users have the same browser and screen resolution.

The solution is for browsers to fix intra-page linking so that link targets are consistently shown at the top of the window. Write to your browser vendor and let them know you want this problem fixed!

Test: When you follow the link at the top of this page, is this displayed at the top of your browser?

Last modified on 21 Dec 2005 by AO

Copyright © 2020 Andrew Oliver