scrollTopが動作しないのはなぜですか？

Question

ページ上の他のjQueryスクリプトは正常に動作しています。scrollTopではなく、https://jsfiddle.net/ivolong/tyvusdte/でもJQuery 3.2.1を使用している私のWebサイトでは動作しません。私が持っている身体内のスクリプトタグの間で

：

$("#button1").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#slide2").offset().top 
     }, 3000); 
    }); 


    $("#button2").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#slide1").offset().top 
     }, 3000); 
    }); 

その後、私が持っている：

<div class="slide" id="slide1"> 

     <p id="title">Title</p> 

     <div id="specialText"> 

      <p>Line 1.</p> 
      <p>Line 2.</p> 
      <p>Line 3.</p> 
      <p>Line 4.</p> 

     </div> 

     <button class="button" id="button1">&#8595;</button> 

    </div> 

    <div class="slide" id="slide2"> 

     <p id="title">Title</p> 

     <div id="text"> 

      <p>Line 5.</p> 
      <p>Line 6.</p> 
      <p>Line 7.</p> 
      <p>Line 8.</p> 

     </div> 

     <button class="button" id="button2">&#8595;</button> 

    </div> 

しかし、ボタンがクリックされたときに、それが応答しない、あなたはここで見ることができます：http://ivolong.co.uk/ExtendedProject.php

Answer 1

javascriptコードがhtmlコードの上にあるためです。その時点で、javascriptコードが解釈されるとき、イベントハンドラがアタッチされないようにレンダリングされたボタンはありません。

あなたが言及した以下のコメントで正しくあなたの下であなたのHTMLコードをJavaScriptコードを配置することによって、この問題を解決する、などができます。jQueries document.ready関数内のコードをラップすることにより、次のようになりますどの：

$(document).ready(function() { 
    $("#button1").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#slide2").offset().top 
     }, 3000); 
    }); 

    $("#button2").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#slide1").offset().top 
     }, 3000); 
    }); 
});