css、jQueryで要素を指定の位置までスクロール追尾させる方法（コードサンプルあり）

2020年8月19日

WEBページ内で「画面上部に戻る」などのボタンを設置してスクロール時も常に画面右下に表示させる場合があります。

さらにボタンをフッター付近で特定の位置に固定したい場合もあるかと思います。

今回は、スクロール追尾のボタンを指定した位置（今回はフッター上部）で固定（とめる）場合を例にコードを紹介します。

環境

jQuery3.5.1

コードサンプル

<script>
jQuery(document).ready(function(){
  jQuery("#move_top").hide(); 
  jQuery(window).on("scroll", function() {

  //footerで止める
  pageHeight = jQuery(document).height();
  currentPosition = jQuery(window).height() + jQuery(window).scrollTop();
  footerPosition = jQuery(".site-footer").innerHeight();
  distance = pageHeight - currentPosition + 36

  //footerの位置までスクロールされたら止める(position変更) 
  if(distance <= footerPosition){
    jQuery("#move_top").css({
      "position":"absolute",
      "bottom": footerPosition
    });
  }else{
    jQuery("#move_top").css({
      "position":"fixed",
      "bottom": "20px"
    });
  }

});
</script>