WordPress: Le script de défilement d’une page JQuery ne fonctionne pas?

Essayer de créer un simple défilement d’une page.

Dans WordPress, j’ai des balises de navigation comme celle-ci.

Contact About 

Les div correspondants pour les deux liens sont ceci.

  
#content
#content </div

C’est le problème (je pense). Mon script ne sélectionne pas l’identifiant des liens d’ancrage.

Script.js

  /* ONE PAGE NAVIGATION FUNCTION */ function setBindings() { jQuery('a[href^="#"]').click(function(e) { // prevent anchor tags for working (?) e.preventDefault(); var sectionID = e.currentTarget.id + "-View"; jQuery("html, body").animate({ scrollTop: jQuery("#" + sectionID).offset().top }, 1000) }) } 

Des idées, qu’est-ce que je fais mal ici? Ceci est le site web

MISE À JOUR ** Voici les modifications que j’ai apscopes après avoir examiné les réponses. Le script ne fonctionne toujours pas?!

  jQuery(document).ready(function() { // add a click listener to each  tags setBindings(); // burger nav jQuery(".burger-nav").on("click", function() { jQuery(".header-nav").toggleClass("open"); }); }); /* ONE PAGE NAVIGATION FUNCTION */ function setBindings() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); // Get the href atsortingbute, which includes '#' already var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ // Find target element scrollTop: jQuery(sectionID).offset().top }, 1000) }); } 

Utilisez le bon identifiant comme:

 Contact for 
#content
About
#content
 jQuery(document).ready(function(){ jQuery("a").on('click', function(event) { if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area jQuery('html, body').animate({ scrollTop: jQuery(hash).offset().top }, 1500, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } }); }); 
  Contact About 

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl est, malesuada nec dolor vel, bibendum congue nunc. Aliquam efficitur nulla ac tortor pharetra, id posuere sapien blandit. Fusce ulsortingces hendrerit diam. Ut quis mi in sapien elementum egestas vitae in purus. Donec nec ex a justo laoreet placerat eu ut lectus. Quisque placerat turpis tincidunt odio blandit, sed posuere ipsum imperdiet. Vestibulum porttitor et sapien vitae pretium. .

Sed scelerisque vulputate ligula, eu blandit enim congue vel. Quisque risus sapien, pellentesque nec est vitae, elementum interdum metus. Fusce sagittis turpis nec tortor lacinia rutrum. Ut sodales blandit tellus a auctor. Vestibulum ante ipsum

Contact

Proin posuere porta magna efficitur tincidunt. Duis tincidunt nulla vel elit sagittis, eu ornare quam vehicula. Sed ut urna a purus imperdiet ulsortingces. Sed non ipsum vitae nisl dapibus volutpat. In sed interdum mauris. Curabitur ipsum sapien, dapibus at purus ut, elementum tempus urna. Nullam dignissim volutpat velit. Duis mi est, eleifend sed ante dolor.

ondimentum et purus. Nunc convallis elit purus, ut tempus ipsum sodales et. Sed vulputate nec massa non viverra. Mauris tempus efficitur efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nulla lectus, dictum non sollicitudin ac, tincidunt nec eros. Quisque posuere tellus in lacinia pharetra. Aliquam pellentesque, lacus quis finibus finibus, ipsum ante aliquet felis, a euismod diam urna nec tortor. Integer vitae tempor nunc, quis auctor mauris.

Selon mon commentaire, il y a plusieurs erreurs de syntaxe dans votre code, où les appels de fonction ne sont pas fermés correctement:

  • function(e) a une traînée supplémentaire )
  • Vous ne fermez pas correctement la méthode jQuery .on() . Vous avez utilisé } au lieu de }) .

Ces erreurs devraient être assez évidentes lorsque vous vérifiez la console de votre navigateur. C’est pourquoi il est impératif de créer un exemple minimal, concret et vérifiable dans votre question, car vous résolvez déjà la moitié de vos problèmes en corrigeant les erreurs de syntaxe dans le code.

Cela mis à part, e.currentTarget.id ne fait pas référence à l’ID de l’élément cible. e.currentTarget fait simplement référence à “l’élément DOM actuel dans la phase de e.currentTarget événements” , qui est toujours l’élément . Puisqu’il ne possède pas d’identifiant, il retournera une chaîne vide et votre sélecteur sera éventuellement -View … et jQuery('-view') ne correspond à rien sur la page. Par conséquent, aucun défilement ne se produit.

Ce que vous pouvez faire à la place est simplement de lire l’atsortingbut href de l’élément d’ancrage, de lui append -View et de le passer simplement au sélecteur jQuery, c’est-à-dire:

 var sectionID = $(this).attr('href') + "-View"; 

Voir l’exemple de preuve de concept ci-dessous:

 jQuery(function() { function setBindings() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); // Get the href atsortingbute, which includes '#' already var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ // Find target element scrollTop: jQuery(sectionID).offset().top }, 1000) }); } setBindings(); }); 
  Contact About 

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl est, malesuada nec dolor vel, bibendum congue nunc. Aliquam efficitur nulla ac tortor pharetra, id posuere sapien blandit. Fusce ulsortingces hendrerit diam. Ut quis mi in sapien elementum egestas vitae in purus. Donec nec ex a justo laoreet placerat eu ut lectus. Quisque placerat turpis tincidunt odio blandit, sed posuere ipsum imperdiet. Vestibulum porttitor et sapien vitae pretium. Cras id nisl enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean in nulla porttitor, tincidunt nulla id, vestibulum enim. Etiam ante justo, congue eu diam consequat, fringilla tempus orci.

Duis magna ipsum, venenatis et massa eget, dignissim imperdiet felis. Quisque vel ulsortingces purus. Cras ante nulla, auctor quis purus et, finibus congue massa. Fusce eleifend sortingstique ipsum non tempor. Vivamus eget leo dignissim, efficitur urna a, dignissim metus. Sed scelerisque vulputate ligula, eu blandit enim congue vel. Quisque risus sapien, pellentesque nec est vitae, elementum interdum metus. Fusce sagittis turpis nec tortor lacinia rutrum. Ut sodales blandit tellus a auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ulsortingces posuere cubilia Curae; Aenean placerat massa nisl, semper varius neque vehicula a. Vestibulum ante ipsum primis in faucibus orci luctus et ulsortingces posuere cubilia Curae.

Contact

Proin posuere porta magna efficitur tincidunt. Duis tincidunt nulla vel elit sagittis, eu ornare quam vehicula. Sed ut urna a purus imperdiet ulsortingces. Sed non ipsum vitae nisl dapibus volutpat. In sed interdum mauris. Curabitur ipsum sapien, dapibus at purus ut, elementum tempus urna. Nullam dignissim volutpat velit. Duis mi est, eleifend sed ante ac, malesuada lacinia sem. Quisque facilisis elit ulsortingcies, scelerisque orci in, tempor purus. Nam dapibus eros at risus tincidunt laoreet. Donec facilisis sed erat interdum aliquet. Integer feugiat lorem id odio eleifend, eget eleifend sapien dapibus. Sed posuere mi vitae metus malesuada mollis. Mauris ac felis fringilla, euismod tellus sed, dictum nunc. In vel gravida dolor.

Curabitur laoreet facilisis massa ac sortingstique. Suspendisse tortor nisl, faucibus non nunc eu, feugiat dictum ligula. Donec ipsum ipsum, volutpat a maximus nec, sagittis quis ipsum. Praesent arcu lectus, rhoncus quis lacinia a, condimentum et purus. Nunc convallis elit purus, ut tempus ipsum sodales et. Sed vulputate nec massa non viverra. Mauris tempus efficitur efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nulla lectus, dictum non sollicitudin ac, tincidunt nec eros. Quisque posuere tellus in lacinia pharetra. Aliquam pellentesque, lacus quis finibus finibus, ipsum ante aliquet felis, a euismod diam urna nec tortor. Integer vitae tempor nunc, quis auctor mauris.

Vous pouvez utiliser ci-dessous pour le défilement de page

 $(document).ready(function() { jQuery('a[href^="#"]').on('click', function(e) { e.preventDefault(); var sectionID = $(this).attr('href') + "-View"; jQuery("html, body").animate({ scrollTop: jQuery(sectionID).offset().top }, 1000) }); });