ワードプレスでフローティングメニューを途中で出現させる方法

2021年1月9日 2024年1月8日

こんにちは、kei（@KeiKei0815blog）です！

悩む人

ページスクロール途中、画面下にフローティングを出現させる方法について知りたい！

こんな悩みに答えます。

本記事の画面下に表示されているフローティングメニューをJavaScriptを使って実装してみましたので、備忘録として記事にします。

デフォルトで表示ではなく、スクロール途中で出現するようにしています。

なお、今回は、はにわまんさんの記事を参考にさせていただきました。はにわまんさん、ありがとうございます！

[toc]

ワードプレスでフローティングメニューを出現させる方法

今回、実装しましたのが

フローティングメニューの幅をMAX
スクロール時に出現

トップへ

上記の感じで実装してみました。

以下、書き方になります。

HTML

 HTML
<div class="floating"> <a href="#">トップへ</a> </div>

CSS

 CSS

.floating {
position: fixed;
right: 0px;
left:0px;
bottom: 0px;
display: none;
z-index:10;
width:100%;
}
.floating a {
display: block;
color: #fff;
background: #000;
padding: 8px;
text-decoration: none;
opacity: 0.6;
z-index:10;
width:100%;
text-align: center;
}
.floating a:hover {
opacity: 1;
}

「z-index:10;」でフローティングメニューボックスの順序が上になるようにしています。

ダミーテキストは、「text-align: center;」で中央にくるようにしています。

JavaScript

 JavaScript
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(window).on("scroll", function($) {
if (jQuery(this).scrollTop() > 200) {
jQuery('.floating').show();
} else {
jQuery('.floating').hide();
}
});
jQuery('.floating').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
</script>

「$(this).scrollTop() > 200」の数字を調整して、スクロール量でフローティングボタンがいつ表示されるかの指示をしています。