36379


animate()で上端までスムーズスクロールしたあとにスクロールがしばらく効かなくなります。

[html]

[code]

    <!DOCTYPE html>
        <html xml:lang="ja" lang="ja">
        <head>
        <meta charset="utf-8">
        <title>jQuery TechnicalNote － SAMPLE</title>
        <link rel="stylesheet" href="../../common/css/common.css">
        <link rel="stylesheet" href="css/style2.css">
        <script src="../../common/js/jquery-1.11.3.min.js"></script>
        <script src="js/script2.js"></script>
        </head>
    
        <body>
    
        <header class="baseHeader">
        <div>
        <h1>jQuery TECHNIQUE</h1>
        <a href="../../chapterList.html">&gt;&nbsp;CHAPTER LIST</a>
        </div>
        </header>
    
        <div id="wrapper">
    
        <p>現在のスクロール値：<span>0</span></p>
    
        </div><!-- /#wrapper -->
    
        <footer class="baseFooter">
        <small>Copyright &copy; SB Creative Corp. All Rights Reserved.</small>
        <footer>
    
        </body>
        </html>
    
[/code]

[js]

[code]

    $(function(){
            $(window).on('load scroll resize', function(e){
                var scrollTop = $(window).scrollTop();
                $('p > span').text(scrollTop);
                console.log(scrollTop);
    
            var posBottom = $(document).height() - window.innerHeight;
            console.log(posBottom);
            if(scrollTop >= posBottom) {
                //$('p').addClass('scrollBottom');
    
                e.preventDefault();
                //戻る
                $('body').animate({scrollTop:0},2000);
                console.log('scroll!');
    
            } else {
                // $('p').removeClass('scrollBottom');
            }
        });
    });
    
[/code]


CC BY-SA 3.0
2017-07-14T09:40:13.693
36356
2017-07-15T05:53:29.513
2017-07-14T11:03:59.823
12297
12297
question
javascript jquery
animate()で上端までスムーズスクロールしたあとにスクロールがしばらく効かなくなります。


こんにちは。

コードを試してみました。  
`if(scrollTop >= posBottom) {` ですが、  
ページ下部にいったときにこの条件が複数回呼ばれています。  
よって `$('body').animate({scrollTop:0},2000);` も複数回呼ばれます。  
ページトップに移動した後も実際には呼ばれた回数実行されているので、その間はさらにスクロールしても `scrollTop:0`
に移動されているので、スクロールができないような状態になっています。

手っ取り早い解決策としては `.stop()` をかませることかなと。  
`$('body').stop().animate({scrollTop:0},2000);`

条件を見直すことができればよより良いかと思います。


CC BY-SA 3.0
2017-07-15T05:53:29.513
36379
2017-07-15T05:53:29.513
18392
36356
answer