一定量スクロールによる表示、非表示について

Question

まず初めに、こちらがコードです。

$(function(){
  $(window).scroll(function() {
    var $scroll = $(this).scrollTop(),
        $mainTop = $('main').offset().top,
        $btn = $('.page-top');
    if ($scroll > $mainTop) {
         $btn.fadeIn(500);
        } else {
         $btn.fadeOut(500);
        }
      });

  $('.page-top').on('click', function() {
     $('body,html').animate({
        scrollTop: 0
     }, 600);
  });
});
コード

こちらの不具合ですが、
画面読み込み時に、display: none;で隠してあるはずの.page-topが現れ、
少しでもスクロールすると消え、指定したスクロール量を超えたらまた表示される事です。

こちらのコードは**/headの直前で書いています。
CSSの指定はdisplay: none;**だけで他には指定していません。

宜しくお願い致します。

Comments

[x_x]

提示コードのみでは再現しないので、HTML も提示願います。

[退会済みユーザー]

この質問ですが、ただCSSのdisplay: none;をコメントにしていたのを忘れていて、不具合が出ていただけでした。
申し訳ございません。

Answer 1

CSSでdisplay: none;がコメントになっており、
コメントを解除したら解決しました。