JavaScript「トップに戻るボタン」というものがあります。ブログの右下によく表れる、押せばページ上部に戻れるアレのことです。これを設置する場合、jQueryを使った方法が多く紹介されています。「トップに戻るボタン」だけにjQueryを使っていたら、軽いとは言えないそれをわざわざ導入するのは、ちょっともったいない気がします。シンプルにするっとトップに戻り、フェードインしながら表れるトップに戻るボタンでしたら、CSSとJavaScriptだけでも簡単に実装できます。スポンサーリンクトップに戻るボタンは、必要か不要かその前に「トップに戻るボタン」については不要だという意見があります。ブラウザの機能やスクロース・スワイプを使えば簡単に戻れるので、ボタン自体の意味は無いというものです。わたし自身はトップに戻るボタンをほぼ押したことはありません。押したと言えば「自分で作ったトップに戻るボタン」の動作確認ぐらいです。個人的にはあっても無くても困りませんし、必要とも感じません。意味があるか無いかと言えば、決して意味は無いとも思いません。参照リンク:サントリーウエルネスオンライントップ(上に)に戻るボタンはスマホ版の商品説明ページで出てくるのですが、このボタン、画面を動かさず停止しているとボタン自体が薄く目立たなくなるように工夫がされています。これを見たユーザーは「あ、読みやすいようにボタンを目立たなくさせているのだな」と感心する方もおられると思います。これはつまり「当社はこれだけお客様に心配りをしていますよ」というアピールになっているのです。このようにトップに戻るボタンは、訪問してきたユーザーに対して何らかのアピールができます。これだけでなくページ全体で言えることですが。トップに戻るボタンを使って他のサイトの差別化やサイト自体の印象を高める効果を持たすことができます。...とはいえ今回の記事を書くにあたってサイトをいくつか調べたのですが、トップに戻るためのボタンは以前よりずいぶん減ったような感じを受けます。トップに戻るボタンが普及したのは、iPhoneの性能がまだ低くスワイプがもっさりしていた頃だったように記憶しています。近年のスマホは性能が良くなってきてますし、iPhoneのSafariはブラウザ上部をタップすればページ上部に戻れますので、そういったことが影響しているのかもしれません。結局のところ、トップに戻るボタンの設置はサイトのコンセプトやターゲットによって変わってくると思うのですのよね。このブログでも以前は付けていましたが、意見を参考にしたり考えたりした結果、現在では外しています。スポンサーリンクjQueryを使わないトップに戻るボタンそれではコードを紹介します。以下のものをはてなブログでしたらフッターなどに記述し、CSSをデザインなどに書き込めばボタンは機能します。JavaScript。1s;}動作確認用のサンプルページも用意しています。よろしければご確認ください。以下、このコードについて解説をします。HTMLHTMLは次のようにしています。class="blogicon-chevron-up"></div>ボタン用のHTMLを用意します。アイコンははてなブログに標準でインストールされているアイコンを使用しています。良かったのですが、今回はシンプルにこちらにしました。CSSボタンの表示・非表示や、フェードインといったアニメーションはCSSで実装します。クラスfade-inを付けたり外したりすることで、それらを実行させます。1s;}要素の表示や非表示はdisplayを使うことが多いのですが、このプロパティはアニメーションをさせるときには向いていません。代わりにfont-sizeをゼロにすることでボタンの表示・非表示を行っています。ちなみにサンプルではシンプルにするため、最低限のCSSにしています。背景色を付けるなどデザインを追加するときは、ご自身で調整してください。document.documentElement.scrollTop;}こちらはトップからスクロールして移動した距離、つまりスクロール量を取得するスクリプトです。多くのブラウザ、特にスマートフォンではpageYOffsetだけでも。このプロパティはIEでは機能しません。そのためIE用にdocument.documentElement.scrollTopを含めています。この方法ではIEの互換モードでは位置を取得しません。最新のIEは互換モード(ドキュメント・モード)は非推進になっています。Docsこのような事情もあり、またコード自体もシンプルにできるので、このようにしています。);クラスの追加や削除、イベント登録を行うために先にボタンの要素を取得しています。);};指定数値以上スクロールしたら要素にクラスを追加し、それ以下の場合はクラスを削除するようにしています。移動する距離は500の部分で、トップからスクロールした量が500ピクセルを超えるとクラスをくっ付けるようにしています。クラスにはフェードインしながら表示させるスタイルを指定しているので、そのクラスが付けばフェードインしながらボタンが表示されるという仕組みになっています。}};このコードは、こちらのものを参考にさせていただいてます。rakuishi.comまず先ほどの位置を取得するスクリプトを使って、スクロール量を取得します。getScrolled();その後、取得したスクロール量を半分に割り、その位置に移動します。);タイマーイベントを使って再び自分自身の関数を登録します。これにより指定時間後に先ほどと同じ処理を行います。ある時間を置いて同じ処理を繰り返す、という処理をしています。秒後に実行されることになります。なるまで繰り返します。計算式は移動距離を2で割って小数点以下は切り捨てるという計算をしています。これにより最初は早く、後半になるにつれて速度がゆっくりになっていくように見えます。トップに戻るまでの移動距離の曲線グラフ移動スピードは、計算式の割る数値の大きさと、繰り返し時の遅延時間によって調整できます。スピードを遅くするなら割る数値を少なくしたり、遅延時間を長くすれば遅くなります。早める場合はその逆です。時間は、遅すぎたら動きがカクカクになりますし、早すぎると繰り返し処理が上手く作動しません。割る数値も大きくしすぎるとスムーズに動いているようには見えず、パッと上部に戻ったように見えてしまいます。スピード調整をする場合は、これらの点を注意して行ってください。今回の記事は以上です。プログラムはまだまだ勉強中ですので、これでベストかどうかは分かりません。短くシンプルにまとめることができたと思います。ご指摘、ご感想があればよろしくお願いします。何かのお役に立てれば幸いです。18:49jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタンTweet関連記事2019-06-02ふわりやわらかで力強い納豆、牛若納豆の『洛北』(と、納豆に合わないものはインスタントコーヒの粉)わたしは、はてなブックマークのアプリで、関心ワードに『納豆...2018-04-15【jQuery】はてなブログの脚注も、するするスクロール移動するスクリプト今回は久々に、はてなブログのカスタマイズ系の記事です。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。