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

 

こんにちは、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」の数字を調整して、スクロール量でフローティングボタンがいつ表示されるかの指示をしています。

 

まとめ

 

今回は、ページ下部にフローティングを表示させる方法について、書きました。

 

本記事が参考になりましたら、幸いです。

 

なお、ワードプレスの記事ごとに個別のCSS(JS)を適応させるやり方について、以下記事を参考にしてみてください。

 

» WordPress（ワードプレス）で記事のみにCSSを適応させるやり方