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

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

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>
Category: Webサイト作成

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 − twelve =