jQueryでページの最下部の位置を取得する方法。

Question

###前提・実現したいこと
ページトップボタンを実装しています。
一定量スクロールしたらfadeInしbottom:0で固定、
ウィンドウ最下部のある要素に達したらフッターに被らないように位置を移動して固定したい、
というような仕様です。

そのためにページの最下部の位置を取得したいです。

###発生している問題・エラーメッセージ
ページ最下部の位置を取得できない。

###該当のソースコード

//pagetop
$(document).ready(function() {
	pagetop.hide();

	var w = window.innerWidth ? window.innerWidth: $(window).width();
	var x = 767;
	var bottomStop = $('body').height();//ここでページ全体の高さを取得したい

	function getScrollTop(){
		if ($(this).scrollTop() > 650){
			pagetop.fadeIn().css('bottom', '0');

		//「スクロール量がページの最下部に達したら」と書いているつもりだが…
		} else if ($(this).scrollTop() >= bottomStop){
			if (w <= x) {//ウィンドウサイズが767px以下の場合（SP）
				pagetop.css('bottom', '180px');
			} else {//ウィンドウサイズが768px以上の場合（PC)
				pagetop.css('bottom', '450px');
			}
		} else {
			pagetop.fadeOut();
		}
	}
	$(window).on("load scroll resize", getScrollTop);

	pagetop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500);
		return false;
	});
});

###試したこと
挙動不審については無事解決いたしました。

Answer 1

挙動不審の原因はスクリプトの命令を書く順序でした。

1.最初にスクロール650の場合の指示、
2.かつスクロール量がボトム位置に達した場合の
2-1.SPの場合の指示、
2-2.PCの場合の指示、
3.それ以外の場合指示、
という順番で書き直すと挙動不審は収まりました。

ただ、ボトム位置を取得する方法がわからかなかったので、
常にbottom:0で固定する仕様に変更することにしました。

jQueryでページの最下部の位置を取得する方法が知りたいです。

Comments

[退会済みユーザー]

最下部までスクロールしても、スクロール量は、ページ高さにならないですよね

[hatoQ]

そうですよね。なのでいろいろ試してみたんですが、考え方がイマイチわからなんです。
var bottomStop = $('body').height() - ($(window).height() - 450+"px");
とかも試してみたんですが…ページの高さ-(ウィンドウの高さ-フッターの高さ)とか？
結局どれもおかしな位置でイベントが発火してしまいました。