【jQuery】スクロールが一番下まで移動したらボタンを表示させる方法

今回はjQueryを使ってスクロールが一番下まで移動したときにボタンを表示させる方法について紹介していきたいと思います。

1つ目はウィンドウが一番したまでスクロールしたときにボタンを出すパターンと2つ目はtextarea内のスクロールが一番下まで移動したときにボタンを出すパターンになります。

スクロールが一番下まで移動したらボタンを表示させる方法

ウィンドウの一番下までスクロールしたときにボタンを出す方法

html

<div class="box">
	<div class="btn"><a href="#">ボタン</a></div>
</div>

css

body{margin: 0;}
.box{
	position: relative;
	background: #eee;
	height: 3000px;
	overflow-y: auto;
}

.box .btn{
	display: none;
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: -150px;
}

.box .btn a{
	display: block;
	width: 300px;
	margin: 0 auto;
	text-align: center;
	padding: 10px;
	background: #000;
	border-radius: 10px;
	color: #fff;
}

jQuery

jQuery(function () {
        var scroll_y = jQuery("body").get(0).scrollHeight;
        jQuery(document).scroll(function(){
                //ウィンドウの高さを取得
                window_ht = jQuery(window).height();

                //スクロール量を取得
                var scroll_p = jQuery(document).scrollTop();
                var scroll = scroll_p + window_ht;
		
                if(scroll_y < scroll){
                        jQuery('.box .btn').fadeIn();
                }
                
        });
});

サンプル

textarea内のスクロールが一番下までいったらボタンを表示させる方法

html

<div class="box">
<textarea>
ここはtextareaエリアです。

テキストテキストテキストテキストテキスト

～以下省略～

</textarea>
<div class="btn"><a href="#">ボタン</a></div>

css

<style>
.box textarea{
	width: 300px;
	height: 250px;
	border: solid 1px #eee;
}

.box .btn{display: none;}
.box .btn a{
	display: block;
	width: 200px;
	text-align: center;
	padding: 10px;
	background: #000;
	border-radius: 10px;
	color: #fff;
}
</style>

jQuery

<script>
jQuery(function () {
        //スクロールを含めた高さ
        var scroll_y = jQuery(".box textarea").get(0).scrollHeight;

        //表示されている高さ
        var scroll_ny = jQuery(".box textarea").get(0).offsetHeight;

        jQuery('.box textarea').scroll(function(){

                //スクロール量
                var scroll_p = jQuery(".box textarea").scrollTop();
                var scroll = scroll_p + scroll_ny;

                if(scroll_y < scroll){
                        jQuery('.box .btn').fadeIn();
                }
        });
});
</script>

サンプル

補足

scrollHeight

scrollHeightプロパティはスクロールも含めた高さを取得することができます。

スクロールで隠れた部分も含めて高さを取得したいときに使えます。

offsetHeight

offsetHeightは表示されている領域の高さを取得することができます。

スクロールがあったとしてもスクロールは含めずに表示されている高さのみを取得したいときに使えます。