为什么scrollTop不工作？

Question

页面上的其他jQuery脚本工作正常，只是不scrollTop，我甚至可以让它在https://jsfiddle.net/ivolong/tyvusdte/上工作，只是不在我的网站上，这是使用JQuery 3.2.1。

在体内脚本标记之间，我有：

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