0

ページを開いてスクロールを始めたらボタンが出現し、フッターが表示されたらボタンが消えるという動きをつけたくて、Jqueryで下記のコードを記述しました。

https://jsfiddle.net/aq8j1rLL/8/

scrollTopが0の場合の動きは問題ないのですが、フッターに入った時、離れる時の動作がブラウザの更新によってできたりできなかったり、ページによっては常にできたりと不安定になっています。
jsfiddleでは常にきっちり動作するのですが、自分のサイトで確認すると不安定です。
よろしければこのコードを精査していただけませんか?
よろしくお願いいたします。

$(function(){
	
	var maxScroll = $(document).height() - $(window).height() - $('footer').height();
	var showFlag = false;
	var topBtn = $('.pagetop');
	topBtn.css('bottom', '-100px');
	
  // スクロールしたらボタン表示
	$(window).on('touchmove scroll', function() {
			if ($(this).scrollTop() > 0 && $(this).scrollTop() < maxScroll) {
				if (showFlag == false) {
            showFlag = true;
						topBtn.stop().animate({
              'bottom': '20px'
              }, 300);
				}
			} else {
				if (showFlag) {
					showFlag = false;
					topBtn.stop().animate({
						'bottom': '-100px'
						}, 300);
				}
			}
	});
});
html, body {
	width: 100%;
	height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#container {
	min-height: 100%;
	position: relative;
	height: auto !important;
	height: 100%;
}

main {
	width: 100%;
  height: 800px;
	padding-bottom: 48px;
}

/*---- フッター ----*/
	
footer {
	width: 100%;
	height: 48px;
	background-color: grey;
	position: absolute;
	bottom: 0;
}

/*---- ページトップボタン ----*/

#pagetop-wrap {
	position: relative;
}

.pagetop {
	position: fixed;
  bottom: 20px;
	right: 20px;
}

.pagetop > a {
  width: 100px;
  height: 100px;
  background-color: #ffdd3f;
	border-radius: 50px;
	display: block;
	transition: all 0.6s ease-in-out 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

<main></main>

	<footer>
        <div id="pagetop-wrap">
            <div class="pagetop">
                <a href="#"><i class="fa fa-chevron-up"></i></a>
            </div>
        </div>
	</footer>

</div>

0

2 件の回答 2

0

ページによってできたりできなかったり更新すればできたりってことから、たぶんheightがautoな画像などDOMContentLoaded後もdocument全体の高さに影響を及ぼす変化があってそれが原因かと。
以下のようにmaxScrollをwindow.onloadのタイミングでも更新したり、チェックし続けるとかいかがでしょうか?

var maxScroll;
function updateMaxScroll(){
    maxScroll = $(document).height() - $(window).height() - $('footer').height();
}
updateMaxScroll();
$(window).on('load', updateMaxScroll);
setInterval(updateMaxScroll, 1000);

maxScrollを取得するロジックもブラウザによってはあやしいっちゃあやしい可能性ありますが、支障がでるほどの問題は出ないと思われます。

1
  • すごい!うまいこといきました! わかりやすい解説ありがとうございます。コードの意味はまだ理解できていませんが今後勉強しながら理解していこうと思います。
    – husky
    2017年1月14日 15:09
0

$(window).height();がキチン取れているのでしょうか?
window.innerHeightに変更してみてはいかがでしょう?

var maxScroll = $(document).height() - $(window).height() - $('footer').height();
/*****↓*****/
var maxScroll = $(document).height() - window.innerHeight - $('footer').height();

HTML全文が見えてないので分かりませんが、
<!DOCTYPE html>の書き方で高さが正常に取得できない問題が発生する可能性があるみたいです
https://stackoverflow.com/questions/12103208

1
  • window.innerHeightに修正しても改善されないみたいです。<!DOCTYPE html>の書き方の件、英文で理解しがたかったので他ページで探してみたのですが見当たらないですね。。
    – husky
    2017年1月14日 6:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。