スムーズスクロールでスクロールした後、ボタンが消えません。

Question

スムーズスクロールを１ページに２つ設置しています。
下記に記述した
スムーズスクロール１は
スクロールが終わった後にボタンが消えるですが、
スムーズスクロール２で指定したボタンは
スクロールが終わった後消えません。

どのようにすれば動作しますでしょうか？

ちなみに、スムーズスクロール１が消えるとスムーズスクロール２も同時に消えます。

//スムーズスクロール１
		var topBtn = $('.page-top');
		topBtn.hide();
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				topBtn.fadeIn();
			} else {
				topBtn.fadeOut();
			}
		});

		$("a[href^='#']").click(function(){
			var Hash = $(this.hash);
			var HashOffset = $(Hash).offset().top;
			$("html,body").animate({
				scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
			return false;
		});
　　　　//スムーズスクロール２
		var topBtn2 = $('.inzai-top');
		topBtn2.hide();
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				topBtn2.fadeIn();
			} else {
				topBtn2.fadeOut();
			}
		});

		$("a[href^='#']").click(function(){
			var Hash = $(this.hash);
			var HashOffset = $(Hash).offset().top;
			$("html,body").animate({
				scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
			return false;
		});

<article class="content">

    <div class="section-in">

        <img class="m10-b alignnone" src="https://www.e-nisino.com/images/kozin/jitsuin_main.jpg" alt="自動車・不動産の売買など、印鑑登録を行って使用する印鑑　実印" width="100%">

        <a href="https://www.e-nisino.com/"><img class="m20-b m20-t alignnone" src="https://www.e-nisino.com/wp-content/uploads/2019/10/kensakutop.jpg" /></a>

        <h2 class="title">実印 個人印鑑を印材から探す</h2>

        <p>自動車・不動産の売買など、印鑑登録を行って使用する印鑑</p>

        <!--納期　通常便-->
        [cc id=4876]

        <!--印鑑のサイズについて（個人印）-->
        [cc id=24859]

        <!--彫刻文字について（個人印）-->
        [cc id=24862]

        <!--実印の必要性について（個人印）-->
        [cc id=24865]

        <h2 class="midashi">
           印材一覧<a id="inzai-top" class="anchor"></a>
        </h2>

    

/*ページトップボタン*/
.page-top{
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	line-height: 1.2;
	margin-bottom: 0;
}
/*印材ＴＯＰ飛び先*/
a.anchor{    display: block;    padding-top: 70px;    margin-top: -70px;}
/*印材一覧へのボタン*/
.inzai-top{
   	display: block;
	position: fixed;
	right: 20px;
	bottom: 130px;
	z-index: 99;
	line-height: 1.2;
	margin-bottom: 0;
}

<!--▼印材ＴＯＰ-->
<p class="inzai-top"><a href="#inzai-top"><img class="over" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/common/inzai-top_off.png" width="80" height="80" alt="印材ＴＯＰへ"></a></p>
<!--▲印材ＴＯＰ-->

<!--▼ページトップ-->
<p class="page-top"><a href="#top"><img class="over" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/common/page-top_off.png" width="80" height="80" alt="<?php _e('To the top', 'keni'); ?>"></a></p>
<!--▲ページトップ-->

Comments

[m.ts10806]

HTML、cssも提示してください。
コピペで他者が再現できるようにご配慮願います。

Answer 1

スムーススクロール2がfadeoutする位置が、スムーススクロール1と同じ100pxに設定されています。
スムーススクロール2のジャンプ先は100pxより下なので判定位置をそれに合わせて変更してください。

            if ($(this).scrollTop() > ここに#inzai-topの位置) {
                topBtn2.fadeIn();
            } else {
                topBtn2.fadeOut();
            }

ちなみに下のコードが2つ重複していますが、1つ不要です。

        $("a[href^='#']").click(function(){
         (中略)
        });

Comments

[niconic73027793]

ありがとうございます！