文書の先頭へのリンク

文書の特定箇所をターゲットとするハイパーリンク、いわゆる「ページ内リンク」で、<a href="#top">Top of the Page</a> のように top というフラグメント識別子を指定すると、それは文書の先頭へのリンクになります。このとき top という名前を持った要素がページの先頭に存在する必要はありません (もし存在すればその要素へのリンクになる)。

…という仕様があることを、つい最近 MDN 経由ではじめて知りました。どうやらもともと一部のブラウザーの独自仕様だったものが HTML5 において仕様に定められた、という経緯のようです。

文書の先頭へのリンクの実装方法としては、コンテンツ全体をラップする #wrapper や #container、あるいは文書の最上部に位置する #header といったフラグメントへのリンクというかたちで実現する例がよく見られます。しかしこれらの手法は、結果的には目的を果たせているように見えるものの、マークアップとしてはあくまで「コンテンツ全体」や「ヘッダー」へのリンクであり、「文書の先頭」へのリンクという本来の意図とは異なるものです。その点、top フラグメント識別子を使うと、そのリンクが文書の先頭へナビゲートすることを目的としたものである、ということを明示できます。

一方で、フラグメント識別子として top というキーワードが予約語のような扱いになってしまう (もし文書中に名前として使えば先頭に戻るリンクが機能しなくなる) のはいまいちです。そう考えると、<a href="#">Top of the Page</a> という空のフラグメント識別子へのリンク (これも top と同様の動作をすると仕様に記されている) を使うか、あるいは button 要素に JavaScript でスクロール処理を持たせる、という方法がいいかなあという気がします。