2016/05/13よくページの右下にある「トップに戻る」ボタンについての考察です。HTMLだけで作る方法もあります。twitterfacebookhatebugooglepluspocketlineWEBページの右下に「トップに戻る」ボタンがあるページをよく見ます。モダンなサイトなら大体どこにでもついてますよね。うちにも矢印のがついております。JavaScriptやjQueryでぬるっと出てくるタイプが多いでしょうか。動的な「戻るボタン」は一部からウザいと言われているにもかかわらず、ページ上部に戻るだけならHTMLだけでも書けるのに、どうしてわざわざプログラムを間に挟むのでしょう。HTMLだけで作る「戻る」ボタンJavaScriptを挟まなくても、HTMLだけで戻るボタンを作ることは可能です。ページトップに飛ぶようになりました。別個にターゲットを設定しなくても、冒頭に飛ばすことが可能です。フラグメントで示します。使用すると、ページの最上部に戻るリンクを作成できます。href=”#top”>ページ上部へ戻る</a>。指定されていればそちらが優先されます。使う相対URLにおける同一ページの指定です。「同じリソースのリロード」として働きます。JavaScriptを使って戻るボタンを作る理由の多くはIE対策ではないでしょうか。バージョン9以降のIEは頑張ってる感ありますけど、古いIE対策のアレなことと言ったらもうね...。古いIEの先進性を知っているだけに悩ましい問題ですが、ベンダープレフィックスなんかも早く滅んで欲しいところです。そんなIEでもjQueryなどのスクリプトを挟めばCSSの互換性をそれほど考えずに色々動かせます。保守的な環境における救世主とさえ言えますが、よくよく考えるとIEユーザが戻るボタンを使ってるかというと極めて疑わしいわけで、その努力を思うと涙なしには語れません。タグでページトップに飛ばすとURLにハッシュがついてしまいます。SNSなどでシェアされたときにそれぞれ別ページとしてカウントされることがあり、場合によってはシェア数が分散するため望ましくありません。...とは言えハッシュがついててもついてなくても当該ページを閲覧することは可能ですし、細かいことを気にしなければHTMLだけで処理するのも手だと思います。スクロールすることで同一ページ感が出るJavaScriptなりjQueryなりを使う理由として、HTMLだけだと「軽すぎる」という問題もあります。HTMLを使った「トップに戻る」はほぼ一瞬で表示が切り替わるため、別のページに遷移したような錯覚に陥ることがあります。UXとして見ると軽い混乱を引き起こしている状態です。遅延させることで同一ページ内の移動であることを明らかにする...という考え方です。おわりにそんなわけで、わざわざjQueryなどを使ってボタンを作る理由でした。IE対策SNSのシェアを分散させないスクロールすることで同一ページ感が出るあと、おち研でもリストを使ってコンテナ風に拡張した多機能な「戻るボタン」を作ろうと思ったのですが、あれこれ盛り込むうちに邪魔な感じしかしなくなってきたのでそのうちバッサリ外します。自己満足で可読性下がったら意味ないし、デザインって難しいですね。】jQueryを使った「トップに戻る」ボタンと多機能コンテナ実装編。技術部についておち研技術部ではWeb関連技術やサイト運営に関する情報をお知らせしています。お探しの記事がありましたら下の検索窓からどうぞ。姉妹サイトいろいろやってます。Mizuki花鳥風月をこよなく愛する体育会系エンジニア。めざせフルスタック~(白目)。コメントをキャンセルメールアドレスは開示されません。エラーが出たら違うCaptchaコードもお試し下さい。