「トップに戻る」ボタンがわざわざjQueryで書かれてる理由

WEBページの右下に「トップに戻る」ボタンがあるページをよく見ます。

モダンなサイトなら大体どこにでもついてますよね。うちにも矢印のがついております。JavaScriptやjQueryでぬるっと出てくるタイプが多いでしょうか。

動的な「戻るボタン」は一部からウザいと言われているにもかかわらず、ページ上部に戻るだけならHTMLだけでも書けるのに、どうしてわざわざプログラムを間に挟むのでしょう。

HTMLだけで作る「戻る」ボタン

JavaScriptを挟まなくても、HTMLだけで戻るボタンを作ることは可能です。

<a href=”#top”> を使う

よくページ内遷移として <a href=”#xxx”> という書き方をしますが、HTML5では正式に <a href=”#top”> がページトップに飛ぶようになりました。別個にターゲットを設定しなくても、冒頭に飛ばすことが可能です。

a 要素 – HTML | MDN
href 属性では、リンク対象を URL または URL フラグメントで示します。この URL フラグメントは、ハッシュ記号 (#) で始まり、現在のドキュメント内のリンク先位置 (ID) を指定します。
（中略）
補足: 特別なフラグメントである “top” を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href=”#top”>ページ上部へ戻る</a>。この動作は HTML5 で明記されました。

href=”#top” のデモ

もちろん、ページ内に id=’top’ が指定されていればそちらが優先されます。

<a href=”./”> を使う

相対URLにおける同一ページの指定です。「同じリソースのリロード」として働きます。

href=”./” のデモ

戻るボタンにJavaScriptを使う理由： IE対策

本題はここからです。

JavaScriptを使って戻るボタンを作る理由の多くはIE対策ではないでしょうか。バージョン9以降のIEは頑張ってる感ありますけど、古いIE対策のアレなことと言ったらもうね…。

古いIEの先進性を知っているだけに悩ましい問題ですが、ベンダープレフィックスなんかも早く滅んで欲しいところです。

で、そんなIEでもjQueryなどのスクリプトを挟めばCSSの互換性をそれほど考えずに色々動かせます。

もはや保守的な環境における救世主とさえ言えますが、よくよく考えるとIEユーザが戻るボタンを使ってるかというと極めて疑わしいわけで、その努力を思うと涙なしには語れません。(´・_・｀)

#つきでトップに戻すとシェアが分散される

あとそれなりに実害がある問題としては、HTML の id タグでページトップに飛ばすとURLにハッシュがついてしまいます。

SNSなどでシェアされたときにそれぞれ別ページとしてカウントされることがあり、場合によってはシェア数が分散するため望ましくありません。

…とは言えハッシュがついててもついてなくても当該ページを閲覧することは可能ですし、細かいことを気にしなければHTMLだけで処理するのも手だと思います。

スクロールすることで同一ページ感が出る

JavaScriptなりjQueryなりを使う理由として、HTMLだけだと「軽すぎる」という問題もあります。

HTMLを使った「トップに戻る」はほぼ一瞬で表示が切り替わるため、別のページに遷移したような錯覚に陥ることがあります。UXとして見ると軽い混乱を引き起こしている状態です。

つまり、わざと遅延させることで同一ページ内の移動であることを明らかにする…という考え方です。

おわりに

そんなわけで、わざわざjQueryなどを使ってボタンを作る理由でした。

• IE対策
• SNSのシェアを分散させない
• スクロールすることで同一ページ感が出る

あと、おち研でもリストを使ってコンテナ風に拡張した多機能な「戻るボタン」を作ろうと思ったのですが、あれこれ盛り込むうちに邪魔な感じしかしなくなってきたのでそのうちバッサリ外します。

自己満足で可読性下がったら意味ないし、デザインって難しいですね。