WordPress講座(個別相談)

BizVektorで作成するスマホサイトのフッターにフローティングメニューを作るときに、右端は「上に戻る」ボタンにしたい場合があります。

スマホのフローティングメニュー(右端が「上に戻る」)

スマホのフローティングメニュー(右端が「上に戻る」)

アイコンを使ったフローティングメニューの作り方は以下のページも参考にしてください。
フローティングメニューをフッターに表示する

「TOP」のリンク先を「#」にすれば単純に画面の最上部に移動するリンクとして機能しますが、せっかくなので、BizVektorの「上に戻る」に相乗りさせてもらいましょう。クリック時にスムーズに上にスクロールされるようになります。

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」ボタン

BizVektorの「上に戻る」に相乗りするには次のように設定します。

  • 「上に戻る」のリンク先を「#wrap」にする
  • そのリンクを「id="back-top"」のdivタグで囲む

たとえば、次のようなHTMLになります。

<div id="back-top">
<a href="#wrap"><i class="fa fa-arrow-circle-o-up"></i><br />
TOP</a>
</div>

「fa-arrow-circle-o-up」はアイコンフォントFont Awesomeの上矢印アイコンです。

これをフローティングメニューの右端などに追加すれば、「上に戻る」アイコンが表示されます。クリックすると、スムーズに画面最上部までスクロールされるはずです。

ただし、スタイルを設定する必要があります。BizVektor組み込みの「上に戻る」ボタンには「position: fixed;」などが指定してあり、常に画面右下に固定表示されるようになっているからです。

フローティングメニューの「上に戻る」用のサンプルCSSを紹介します。

#back-top a {
    position: relative;
    bottom: 0;
    right: 0;
}

これで、「上に戻る」がフローティングメニューになじんで表示されるようになります。

実際は既存の「上に戻る」との兼ね合いがあるので「フローティングメニューのボタンのみ」(例:#footerFloatingMenu #back-top a)のようなセレクタを組み立てるなど、少し工夫が必要です。
フローティングメニューの右端に「上に戻る」を表示

フローティングメニューの右端に「上に戻る」を表示

あとはいろいろとお試しください。

ゼロからフローティングメニューの設置をご希望の方はWordPress個別サポートで承ります。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク