aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*

はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:

[hitode909]

id=topの要素を用意した記憶が何度かあるけど無くても良かったのか…

[teramako]

へぇ～面白い。// 元々あった仕様ではなくWHATWG HTMLがブラウザの挙動からバックポートしたのでは？って気がする（何も調べてない

[kuzumimizuku]

追記にあるように id=で使っちゃうとそれが優先されるので微妙に気持ち悪い仕様だなあと思ってたりする。まあ、ページ先頭以外に#topを置くことはないとは思うけど。

[diveintounlimit]

ほーん意外と知られてないのね。

[flirt774]

ブラウザ独自実装から仕様になったらしい　https://qiita.com/ginpei/items/129969dda33856268057

[prozorec]

JavaScriptでonclickがあるときにhref="#"としているのは、これが理由なのだろうか？

[yarumato]

“MDN の a タグのページに書いてあって、 HTML の仕様に定義されている。 「href="#top" か href="#" を、現在のページのトップへのリンクとして使うことができます」”

[shingo-sasaki-0529]

そういえばそんな挙動あったなぁと思ったけど、ちゃんと使用通りの挙動なのね。

[aoiasaba]

なんやて！！

[nodoca_engine]

いい話

[Windymelt]

へー

[tailtame]

マジか。9年近くも前に！(ブコメ)

[wdoomer]

知らなかった！

[spark7]

古からあるやつ

[shikiarai]

なんか知らんけど昔からそうだった気がするやつシリーズの一つ

[hatest]

JavaScriptでonclickがあるときにhref="#"としているのは、JavascriptがOFFの時に誤爆（href=""だとリロードになる）しないようにだと思うよ。いまどきJavascriptを設定でOFFってる人少ないと思うけど昔はブラクラ除けで結構OFFってた

[buhoho]

伊東家の食卓。IT家の食卓かも

[ttkazuma]

昔は空タグ用意してたな

[moerrari]

カンタンにページ先頭に戻すリンクが用意できる

[sorosoronemui]

ああ、なるほど。何かのときに遭遇してなんかjsでやってんなと思って特に確認してなかったけどこれかもな

[mole-studio]

何このインターネットの裏技

[a96neko]

見てる

[TakamoriTarou]

しぃょーなのか

[mayumayu_nimolove]

あまり困らない

[ttskch]

知らんかった😳

[versatile]

bottom は？

[gfx]

知らなかった。

[cl-gaku]

id="top"の要素いらんかったのか…

[Helfard]

そうなのかー！

[bocuno]

まじか。知らなかった。

[neet_modi_ki]

知らんかった

[a-know]

へぇ