0

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

[html]

<!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>

[js]

$(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');
        }
    });
});

1 件の回答 1

1

こんにちは。

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

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

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

2
  • ありがとうございます!試してみます!
    – aqua
    Commented 2017年7月15日 5:55
  • 確認できました!ありがとうございます!
    – aqua
    Commented 2017年7月15日 6:46

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

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