Pourquoi scrollTop ne fonctionne-t-il pas?

Question

Les autres scripts jQuery sur la page fonctionnent bien, mais pas scrollTop, je pourrais même le faire fonctionner sur https://jsfiddle.net/ivolong/tyvusdte/ mais pas sur mon site web, qui utilise JQuery 3.2.1.

Entre les deux balises de script dans le corps je:

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


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

J'ai:

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

Mais il ne répond pas lorsque le bouton est cliqué, vous pouvez voir ici: http://ivolong.co.uk/ExtendedProject.php

Answer 1

C'est parce que le code javascript est au dessus du code html. À ce stade, lorsque le code javascript est interprété, il n'y a pas de boutons rendus qui n'entraînent aucun gestionnaire d'événements.

Vous pouvez résoudre ce problème en vous plaçant du code javascript dans votre code html ou comme correctement dans un commentaire ci-dessous mentionné: en enveloppant votre code à l'intérieur jQueries fonction document.ready qui ressemblera à:

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