クリックして、サイト内リンクに移動後　後消えるボタンが作れないです

クリックしてスクロール終了後消えるボタンを作ろうとしています。

ヘッダーに設置したお問い合わせボタンをおすと、お問い合わせフォームの位置に移動するボタンを作るところまで
できました。
※スームーススクロールでゆっくりとリンク箇所まで移動。

その後に、押したボタンがフェイドアウトするようにしたいと思い
下記のコードを記述しました。

$('.header-reserve-button').click(function(){
  var speed = 500;
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $("html, body").animate({scrollTop:position}, speed, "swing");
  return false;
});
var scrollend = $('#contact').offset().top ; //ページ上部からの距離を取得
var distance = 0;
$(document).scroll(function(){
  distance = $(this).scrollTop(); //スクロールした距離を取得
  if (scrollend <= distance) {
    $('.header-reserve-button').fadeOut();
  } else{
    $('.header-reserve-button').fadeIn();
  }
});

<div class="fixed-nav">
           <a href="#contact" class="header-reserve-button" target="_blank"
            >お問い合わせ</a
          ><!-- /.header-button -->
        </div><!-- /.fixed-nav -->

しかし、ボタンがスクロール終了後消えません。

どのように記述すれば消えるのでしょうか？
＊追記　
指定した位置まで移動した後、さらにスクロールすると消えます。
スクロールが終わった直後にきえません。

下記のサイトを参考にしました。

特定の位置までスクロールしたら消える要素の実装方法

デモ

<div class="wrapper">
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="demo01__btn js-demo01-btn-area">
       <a href="#demo01__area" class="demo01__link js-demo01-btn">ページ下部固定ボタン▼</a> 
    </div>
    <div id="demo01__area" class="cont js-demo01-area">
        <p>ここで止まる</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
    <div class="cont">
        <p>テキスト</p>
    </div>
</div>

$(function(){
  $('.js-demo01-btn').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
  var scrollend = $('#demo01__area').offset().top ; //ページ上部からの距離を取得
  var distance = 0;
  $(document).scroll(function(){
    distance = $(this).scrollTop(); //スクロールした距離を取得
    if (scrollend <= distance) {
      $('.js-demo01-btn-area').fadeOut();
    } else{
      $('.js-demo01-btn-area').fadeIn();
    }
  });
});

試した事、

jquery の確認

スムーススクロールが動いているでjquery は動作していると思います。