왜 scrollTop이 작동하지 않습니까?

Question

페이지의 다른 jQuery 스크립트가 제대로 작동하고 있습니다. scrollTop이 아니기 때문에 JQuery 3.2.1을 사용하고있는 https://jsfiddle.net/ivolong/tyvusdte/ 웹 사이트에서 작동하지 않을 수도 있습니다. 본문에 스크립트 태그 사이에

내가 가진 :

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

을하지만이 버튼을 클릭하면, 당신은 여기에서 볼 수 있습니다 응답하지 않습니다 :

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


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

그리고 내가 가진 http://ivolong.co.uk/ExtendedProject.php

Answer 1

자바 스크립트 코드가 html 코드 위에 있기 때문입니다. 이 시점에서 자바 스크립트 코드가 해석 될 때 이벤트 핸들러가 연결되지 않게하는 버튼은 렌더링되지 않습니다.

당신은 당신이 HTML 코드에서 당신에게 자바 스크립트 코드를 배치하여이 문제를 해결하거나 아래 언급 한 코멘트에서 제대로 같은 수 있습니다 : 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); 
    }); 
});