0今回もJavaScriptを使って、よくある「画面の一番上にスクロールして戻る」ボタンを作ってみたいと思います。分かりにくいかもですが、完成イメージはこんな感じ↓↓です。比較的簡単に作れますし、デザインも思い通りにできるので、オススメです。ベースとなるHTMLです。fa-angle-up"></i></div>1行目はボタン本体、2行目はボタンの中に入れる文字列です。Awesome」のアイコンを使わせていただきました。TOPに戻るボタンは画面内に固定表示するので、HTMLを入れる場所は<body></body>内ならどこでもOKです。邪魔にならない場所に挿入してください。続いて、デザインを決めるCSSです。画面右下に表示されるように画面右端(right)と画面下端(bottom)からの距離で位置を決めています。ちなみにこのサイズ指定はスマホ表示でちょうどいいくらいのサイズになっているのでご注意を!多少画面サイズが変わっても対応できるように単位をvwで指定しています。13行目のbox-shadowで立体的に影を表示しています。ここまでで、画面右下にこんな感じのボタンが表示されるようになると思います。続いて、JavaScriptです。念のため、jQueryの使うための準備からおさらいしておきたいと思います。Network)と呼ばれるインターネット上に公開されているライブラリを参照する方法の2つがあります。今回は後者の方法を採ります。CDNを利用する場合はHTMLの<head>タグ内に以下のように記述します。「3.4.0」は2019年4月25日時点のバージョンですので、使用する際には必ず最新版を確認してください。src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>これで準備は完了です。今回はHTML内にjQueryを埋め込む方法を採りたいと思います。こちらも同じく<head>タグ内に以下の記述を追加します。})</script>3行目は「topback-button」クラスを持つ要素がクリックされたら、という記述、4行目がアニメーションしながらページの一番上部へスクロールするという記述になります。0}」の部分で画面上部から何pxの位置に移動するかを指定できます。最後の「’linear’」はアニメーション速度が終始一定という指定になります。早すぎたり遅すぎたりが出てくると思います。何が起きたのかが分かりづらいんです。スクロールすることでトップに戻ったことが分かりやすいようにしています。多くのトップに戻るボタンでスクロールするアニメーションが採用されているのは、おそらくその辺りのユーザビリティが考慮されているんだと思われます。ここまでで最低限の機能は実装できましたが、あと1つだけプラスしたいと思います。画面が少しでもスクロールされたらボタンを表示するという動きにします。CSSを以下のように修正します。15行目以降が追記した箇所です。pointer;}続いて、jQueryです。7〜14行目が追記した箇所です。「scrollTop()」...画面の一番上からスクロールされた距離(px)が0より大きかったら、つまり少しでもスクロールされていたら、「topback-button」に「transform」クラスを追加する。なければ「transform」クラスを削除する、という動きになります。「transform」クラスが追加された時の変化はCSSの20、21行目にあります。訳すと、「透明度を70%にする(元は0%)」、「2秒間で」になります。CSSの方はついでにマウスカーソルがボタンに重なった時の動きも25、26行目に入れています。コメントをキャンセルメールアドレスが公開されることはありません。仕事や勉強、趣味などについて、とりとめのないことを書いていくブログです。閉じる%d人のブロガーが「いいね」をつけました。