js「ページトップへ戻る」が少し下へスクロールするとふわっと出るコード。
24.09.24
JSコードを記入。headerのjs本体より下に記入。
「ページトップへ戻る」が少し下へスクロールするとふわっと出るコードのご案内です。
以下のコードをscriptで囲います。fixed_wrap_wrapのclass名を置き換えましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(function(){ var pagetop = $('.fixed_wrap_wrap'); pagetop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> |
「トップに戻す」のではない場合。
「トップに戻す」のではなく、問い合わせや他のリンク先にする場合で、要素がふわっと出てくれればそれだけでいい!という場合は、以下を使います。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(function(){ var pagetop = $('.fixed_wrap_wrap'); pagetop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); }); </script> |
お役に立てましたらadsenseクリックお願いします!
いかがでしたでしょうか?もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします!↓上手くいきますようにお祈りしておきます!
関連記事
-
2019.04.05 動くGIFアイコンがもらえる
-
2023.12.20 WordPress カスタム投稿タイプのパーマリンクを思い通りに変更する方法
-
2021.04.14 wordpress contactform7が迷惑メールにならないようにSPF設定をする
-
2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法