コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

HTMLでaタグのhrefに#を指定するとページ上部に遷移するのは、HTMLの仕様として記述がある

HTMLの動作の穴をついた妙技系かと思ったらちゃんとした仕様があった。

出典

シャープの後に記述する文字列を色々なところでアンカーと称する事が多く、そのアンカー名は別名フラグメント識別子といい、その解説に

メモ: href="#top" または空のフラグメント href="#" を現在のページの最上部へのリンクとして使用できます。この動作は HTML 仕様書で定義されています。 - <a>: アンカー要素 - HTML: HyperText Markup Language | MDN

と記述があり

リンク先の文を見ると

If the indicated part of the document is the top of the document, then: Set the Document's target element to null. Scroll to the beginning of the document for the Document.

If fragment is the empty string, then the indicated part of the document is the top of the document; return.

と書かれており

  • topを指定するとドキュメントの戦闘までスクロールする
  • フラグメントが空の文字列の場合はtopである

のような記述が読み解け、仕様としてつくられていることがわかる

余談

ちなみに移動しないリンクなどで

<a href="#!">どこにも移動しないリンク</a></li>

のような書き方もできるが、これは idセレクタには!が使用できないからどこにも移動しない という挙動を利用したものの様子

参考リンク