@Mori2ndです。最近jQueryを利用していろいろカスタマイズするのに凝ってます。
今回はスクロールに応じてフェードイン・フェードアウトして出現する、ページの「トップに戻る」ボタンをPC向けサイトに実装してみました！
ページの「トップに戻る」ボタンでやりたいこと
ページの「トップに戻る」ボタンを実装するにあたってやりたかったことは以下の3つ。
- スクロールに応じてフェードイン・フェードアウトする。
- 「トップに戻る」ボタンを実行した後もURLが変わらない。
- WordPress用のプラグインはなるべく使わない。
この条件で調べていたところドンピシャの記事がみつかりました。グレート！
[Я]トップに戻るボタンをjQueryでニュルッと改造する ： りくまろぐ
jQueryを利用して実装
先ほどの記事を参考にしてさっそく実装です。
jQueryのファイルを読み込む
最初にjQueryを利用するためのファイルを読み込みます。こちらはGoogleAPIからの例。
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
jQueryでの処理
続いてjQueryでの処理部分です。
ここでは「ボタンを表示するタイミング」と「ボタンを押してからトップに戻るまでのスクロール速度」を指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type="text/javascript"> $(function() { var topBtn = $('.backtotop'); //最初はボタンを隠す topBtn.hide(); //スクロールが300に達したらボタンを表示させる $(window).scroll(function () { if ($(this).scrollTop() > 300) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
解説がわかりやすかったので、自分のブログに合わせた設定も簡単でした。
「トップに戻る」ボタンを設置
最後は「トップに戻る」ボタンを設置するための記述です。
1 2 3 | <div class="backtotop" align="center"> <a href="#header">トップに<br>戻る</a> </div> |
このボタンをクリックするとスクロールしてトップに戻るようになります。
少し解説すると「#header」がトップの場所になっていて、ここに移動するイメージですね。(利用しているテーマに合わせてご指定ください。)
やり方によってはここで指定している「#header」がURLの最後に付く場合があります。
例）https://delightmode.com/#header
しかし、ここで実装した方法だとURLが変更されないようですね。
シェアしてもらったときなど、場合によってURLが変わるのは嫌ですからね。
CSSでデザインをカスタマイズ
ボタンが設置できたので、デザインをカスタマイズしました。
参考にこのブログでの内容を書いておきます。
ボタン部分の角を丸くして、カーソルが来た場合に色を変えています。
それから、z-indexでフッターと重なったときの配置を調整しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .backtotop { position: fixed; right: 15px; bottom: 20px; z-index: 9000; display: none; } .backtotop a { display: block; color: #777777; padding: 14px 6px; margin: 0; background-color: #DDDDDD; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 12px; } .backtotop a:hover { background: #666666; color: #FFFFFF; } |
▼左側が通常。右側がカーソルが来た時。
CSSはそれほど詳しいわけではないので、不要な部分もあるかもしれません。実装する場合は必要に合わせて調整してみてください！
おわりに
りくまろぐさんの記事がわかりやすかったので、すぐに実装できました。ありがとうございます！
ページの「トップに戻る」ボタンがあると記事を読んだり、探したりがやりやすくなりそうだと思ったので導入してみたんですが、自分でブログの内容を確認しやすくなったのが一番よかったかも(笑)
@Mori2ndでした。
