31840


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

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

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

[code]

    $(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);
        }
       }
     });
    });
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-01-14T03:26:07.263
31833
2017-01-15T03:13:56.057
2017-01-15T03:13:56.057
20135
20135
question
javascript jquery
Jqueryでスクロール位置を取得したアニメーションの不具合


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

[code]

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

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


CC BY-SA 3.0
2017-01-14T05:35:05.427
31836
2017-01-14T05:35:05.427
2017-05-23T12:38:56.467
-1
31833
answer


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

[code]

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

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


CC BY-SA 3.0
2017-01-14T09:58:30.097
31840
2017-01-14T10:03:35.563
2017-01-14T10:03:35.563
19526
19526
31833
answer