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をポチっとクリックお願いします!↓上手くいきますようにお祈りしておきます!
関連記事
-
2018.10.27 粒子状のパーティクルを背景に表示させる方法。
-
2020.12.09 psdで印刷物を作る時のまとめ
-
2020.05.06 wordpress css更新時に自動でキャッシュをリロードする方法
-
2024.06.25 SSL証明書を証明書としてダウンロードする方法
-
2018.10.27 秀丸 ファイルを見比べる方法やgrepを使ってフォルダ内のファイルを検索する方法。
-
2019.04.05 マウスオーバーした時に画像がふわっと大きくなる方法