js「ページトップへ戻る」が少し下へスクロールするとふわっと出るコード。

24.09.24

JSコードを記入。headerのjs本体より下に記入。

「ページトップへ戻る」が少し下へスクロールするとふわっと出るコードのご案内です。
以下のコードをscriptで囲います。fixed_wrap_wrapのclass名を置き換えましょう。

<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>

$(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>

「トップに戻す」のではない場合。

「トップに戻す」のではなく、問い合わせや他のリンク先にする場合で、要素がふわっと出てくれればそれだけでいい！という場合は、以下を使います。

<script>
$(function(){
  var pagetop = $('.fixed_wrap_wrap');
  pagetop.hide();
  $(window).scroll(function () {
     if ($(this).scrollTop() > 100) {
          pagetop.fadeIn();
     } else {
          pagetop.fadeOut();
     }
  });
});
</script>