ページを開いてスクロールを始めたらボタンが出現し、フッターが表示されたらボタンが消えるという動きをつけたくて、Jqueryで下記のコードを記述しました。

https://jsfiddle.net/aq8j1rLL/8/

scrollTopが0の場合の動きは問題ないのですが、フッターに入った時、離れる時の動作がブラウザの更新によってできたりできなかったり、ページによっては常にできたりと不安定になっています。
jsfiddleでは常にきっちり動作するのですが、自分のサイトで確認すると不安定です。
よろしければこのコードを精査していただけませんか？
よろしくお願いいたします。

$(function(){
 
 var maxScroll = $(document).height() - $(window).height() - $('footer').height();
 var showFlag = false;
 var topBtn = $('.pagetop');
 topBtn.css('bottom', '-100px');
 
  // スクロールしたらボタン表示
 $(window).on('touchmove scroll', function() {
   if ($(this).scrollTop() > 0 && $(this).scrollTop() < maxScroll) {
    if (showFlag == false) {
            showFlag = true;
      topBtn.stop().animate({
              'bottom': '20px'
              }, 300);
    }
   } else {
    if (showFlag) {
     showFlag = false;
     topBtn.stop().animate({
      'bottom': '-100px'
      }, 300);
    }
   }
 });
});
html, body {
 width: 100%;
 height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#container {
 min-height: 100%;
 position: relative;
 height: auto !important;
 height: 100%;
}

main {
 width: 100%;
  height: 800px;
 padding-bottom: 48px;
}

/*---- フッター ----*/
 
footer {
 width: 100%;
 height: 48px;
 background-color: grey;
 position: absolute;
 bottom: 0;
}

/*---- ページトップボタン ----*/

#pagetop-wrap {
 position: relative;
}

.pagetop {
 position: fixed;
  bottom: 20px;
 right: 20px;
}

.pagetop > a {
  width: 100px;
  height: 100px;
  background-color: #ffdd3f;
 border-radius: 50px;
 display: block;
 transition: all 0.6s ease-in-out 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

<main></main>

 <footer>
        <div id="pagetop-wrap">
            <div class="pagetop">
                <a href="#"><i class="fa fa-chevron-up"></i></a>
            </div>
        </div>
 </footer>

</div>