mk-webwork codenote
指定の高さで出現し、フッター手前で止まる
矢印アイコン

指定の高さで出現し、フッター手前で止まる

  • JavaScript
  • 動くデザイン
<footer id="footer">

<!-- ========================================  
  指定の高さで出現し、フッター手前で止まる 
========================================  -->
  <div id="follow-tag"><a href="#"><img src="img/kaba.png" alt="追従タグ">
  </a></div> 
<!-- ===================================  -->

  <small class="footer__copyright">© sample.com</small>
</footer>
/* =================================== */
/*   指定の高さで出現し、フッター手前で止まる --  */
/* =================================== */
#follow-tag a{
  width: 60px;
  height: 60px;
  transition:all 0.3s;
}
#follow-tag a:hover {
  opacity: 1;
  scale:calc(1.2);
}
#follow-tag a img {
  width: 60px;

}
#follow-tag a img:hover {
  scale:calc(1.2);
}
/*リンクを右下に固定*/
#follow-tag {
  position: fixed;
  right: 10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px); 
}

/*　上に上がる動き　*/

#follow-tag.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

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

// ==========================================
//  指定の高さで出現し、フッター手前で止まる 
// ==========================================

//スクロールした際の動きを関数でまとめる
function PageTopAnime() {

  var scroll = $(window).scrollTop(); //スクロール値を取得
  if (scroll >= 1500){//1500pxスクロールしたら
    $('#follow-tag').removeClass('DownMove');   // DownMoveというクラス名を除去して
    $('#follow-tag').addClass('UpMove');      // UpMoveというクラス名を追加して出現
  }else{//それ以外は
    if($('#follow-tag').hasClass('UpMove')){//UpMoveというクラス名が既に付与されていたら
      $('#follow-tag').removeClass('UpMove'); //  UpMoveというクラス名を除去し
      $('#follow-tag').addClass('DownMove');  // DownMoveというクラス名を追加して非表示
    }
  }
  
  var wH = window.innerHeight; //画面の高さを取得
  var footerPos =  $('#footer').offset().top; //footerの位置を取得
  if(scroll+wH >= (footerPos+10)) {
    var pos = (scroll+wH) - footerPos+10 //スクロールの値＋画面の高さからfooterの位置＋10pxを引いた場所を取得し
    $('#follow-tag').css('bottom',pos); //#page-topに上記の値をCSSのbottomに直接指定してフッター手前で止まるようにする
  }else{//それ以外は
    if($('#follow-tag').hasClass('UpMove')){//UpMoveというクラス名がついていたら
      $('#follow-tag').css('bottom','10px');// 下から20pxの位置にページリンクを指定
    }
  }
}

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

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