縦に長いページ、特にスマートフォンでのページ閲覧の時に、使っている人にストレスを感じさせない方法はいくつかありますが、画面の一番上に戻るためのボタンを付けてあげるのはとても効果的です。
使いやすいサイトだと思ってもらえるだけで、記事にも注目してもらえるものです。
ということで今回は、「topへ」ボタンを作ってみましょう！
完成形はこんな感じです
まずはボタンを作ります
HTML
- <h1>practice</h1>
- <p class="link"><a href="#" class="top">topへ</a></p>
- <p>Esse ad....
トップに戻るためには、リンクを#とするだけでOKなんです。
<a>は当然<p>で囲んであげます。
CSS
- .link {
- background-color: rgb(255, 255, 255);
- border: #000 solid 1px;
- width: 150px;
- border-radius: 10px;
- text-align: center;
- }
- .top {
- color: #000;
- padding: 10px;
- display: block;
- text-decoration: none;
- border-radius: 10px;
- }
.linkのセレクタが外側の<p>、.topのセレクタが内側の<a>ですね。
ちょっとごちゃごちゃしていますが、まぁ要するに普通のリンクのボタンを用意します。
今はタイトル<h1>のすぐ下にあるのでこんな感じに表示されます。
このままでは画面の左上にあるだけで、スクロールをしても置いて行かれてしまいます。
これを、いつでも画面の右下にあるようにしたい、ということです。
ボタンの作り方は以下の記事も参考にしてください。
作ったボタンをいつでも画面に入るようにする
さて、いつでも画面についてきて、かつ右下にあるようにしてあげましょう。
.linkのCSSに追記します。（下の3行、赤になっている部分を追加）
CSS
- .link {
- background-color: rgb(255, 255, 255);
- border: #000 solid 1px;
- width: 150px;
- border-radius: 10px;
- text-align: center;
- position: fixed;
- right: 10px;
- bottom: 0px;
- }
position: fixed;は指定された要素の位置を固定する役割をします。
positionレイアウトについてはこちらの記事も参考にしてください。
webサイトのレイアウト方法３選！【float/position/flex】
そして、その下に書いてある
right: 10px;
bottom: 0px;
こちらで固定する場所を指定しています。
画面の右端から10pxのところ
画面の下から0pxのところに対象をまさにfixするということです。
一度ブラウザで確認をしてみます。
画面の右下に固定されて、スクロールしてもついてきましたか？
スムーススクロール機能を追加する
これで画面の右下にいつでもボタンが付いてくるようになりました。
このボタンをクリックすると画面の一番上に一瞬で戻ってくれます。
でも、このままでは普通のリンクなので、ほんとに一瞬で戻ってしまうのでなんだか味気ない…
ということで、スムーススクロールという機能を付けてあげましょう。
スムーススクロールは、同じページの中でリンク間を移動するときに、ゆっくり動いてくれる機能です。
スムーススクロールの機能を追加するには、jQueryというプログラムのようなものを使います。これは、いちいち難しいプログラムを自分で書かなくても、WEBからプログラムを拾って使うことができるものです。
HTMLの<head>~</head>の間に以下をコピペしてください。
- <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js">
- </script>
- <script>
- $(function () {
- // #で始まるリンクをクリックしたら実行されます
- $('a[href^="#"]').click(function () {
- // スクロールの速度
- let speed = 600; // ミリ秒で記述
- let href = $(this).attr("href");
- let target = $(href == "#" || href == "" ? 'html' : href);
- let position = target.offset().top;
- $('body,html').animate({ scrollTop: position }, speed, 'swing');
- return false;
- });
- });
- </script>
これだけでページがゆっくり移動するようになったと思います。
難しいことはさておき、このjQueryの機能は、＃が付いているリンクを押したときに、スムーススクロールをしますよ、という命令をしてくれるものです。
ご存じのように、一般のリンクには＃がついていません。
＃が付くのはページ内リンクのみです。
ということで、ページ内のリンク間の移動の際だけ、ゆっくりスクロールして移動してくれるわけです。
あと、スクロールのスピードも調整することができます。
let speed = 600 の部分の数字を変更して、いろいろ試してみてください。
まとめ：UIはとっても大事な要素です
いくらおしゃれに作っても、コンテンツが良くても、訪れた人が使いづらいと感じるウェブサイトではマズいです。
今回ご紹介した「トップへ」ボタンをあなたのサイトにも取り入れて、せっかく訪れてくれたユーザーに不便を感じさせないように、さらに機能を充実させてあげましょう。
特に長い記事になると。一番下に他へのリンクが用意されていたとしても、途中でトップに戻って目次を確認したり、したくなるものです。
いつでも自分が利用者の立場で考えることが重要かと思います。
