code_note

<!-- ========================================  
  追従リンクa　-- 指定の範囲内で下から出現 --
========================================  -->
<section id="followLink-a">
  <h2>【　追従リンク　-- 指定の範囲内で下から出現 --　】</h2>
  
  <!-- リンク出現エリア　ここから -->
  <div id="follow-area" class="content">
    <h3>Area 3</h3>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>
  <!-- リンク出現エリア　ここまで -->
  <div id="followLink-a__Btn" class="hide-btn">
    <a href="#"><img src="img/1443.png" alt="追従リンク"></a>
  </div>

</section>

/* =================================== */
/*   追従リンクa　-- 指定の範囲内で下から出現 --  */
/* =================================== */
#followLink-a .content{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#followLink-a .content h3 {
  margin-bottom: 10px;
  font-size: min(6.4vw, 2.4rem) ;
}
#followLink-a .content p {
  margin-bottom: 10px;
  font-size: min(4.267vw, 1.6rem) ;
  line-height: 1.5;
}

#followLink-a a img{
  width: 100px;
  height: 100px;
  margin: 0 auto;
  transition:all 0.3s;
}

#followLink-a__Btn {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(150px);
}

/*　上に上がる動き　*/
#followLink-a__Btn.UpMove{
  animation: UpAnime 0.7s forwards;
}
    @keyframes UpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

/*　下に下がる動き　*/
#followLink-a__Btn.DownMove{
  animation: DownAnime 0.7s forwards;
}
    @keyframes DownAnime{
      from {
        opacity: 1;
      transform: translateY(0);
      }
      to {
        opacity: 1;
      transform: translateY(150px);
      }
    }

// ==========================================
//  追従リンクa　-- 指定の範囲内で下から出現 -- 
// ==========================================
//スクロールした際の動きを関数でまとめる
function setFadeElement(){
  var windowH = $(window).height(); //ウィンドウの高さを取得
  var scroll = $(window).scrollTop(); //スクロール値を取得
    
    //出現範囲の指定
  var contentsTop = Math.round($('#follow-area').offset().top);  //要素までの高さを四捨五入した値で取得
  var contentsH = $('#follow-area').outerHeight(true); //要素の高さを取得
    
    //2つ目の出現範囲の指定※任意
  //var contentsTop2 = Math.round($('#second-area').offset().top); //要素までの高さを取得
  //var contentsH2 = $('#second').outerHeight(true);//要素の高さを取得

    //出現範囲内に入ったかどうかをチェック
  if(scroll+windowH >= contentsTop && scroll+windowH  <= contentsTop+contentsH){
    $("#followLink-a__Btn").addClass("UpMove");    //入っていたらUpMoveをクラス追加
    $("#followLink-a__Btn").removeClass("DownMove");   //DownMoveを削除
    $(".hide-btn").removeClass("hide-btn");   //hide-btnを削除
  }
  
  //2つ目の出現範囲に入ったかどうかをチェック※任意
   // else if(scroll+windowH >= contentsTop2 && scroll+windowH <= contentsTop2+contentsH2){       
    //$("#page-top").addClass("UpMove");    //入っていたらUpMoveをクラス追加
    //$("#page-top").removeClass("DownMove");   //DownMoveを削除
  //}//それ以外は

    else{
        if(!$(".hide-btn").length){       //サイト表示時にDownMoveクラスを一瞬付与させないためのクラス付け。hide-btnがなければ下記の動作を行う
    $("#followLink-a__Btn").addClass("DownMove");  //DownMoveをクラス追加
    $("#followLink-a__Btn").removeClass("UpMove"); //UpMoveを削除 
    }
  }
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  setFadeElement();/* スクロールした際の動きの関数を呼ぶ*/
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
  setFadeElement();/* スクロールした際の動きの関数を呼ぶ*/
});



//// #page-topをクリックした際の設定
//$('#followLink-a__Btn').click(function () {
//    $('body,html').animate({
//        scrollTop: 0//ページトップまでスクロール
//    }, 500);//ページトップスクロールの速さ。数字が大きいほど遅くなる
//    return false;//リンク自体の無効化
//});

追従リンク – 指定の範囲内で下から出現 —

追従リンク　– 指定の範囲内で下から出現 —