Le défilement d'une page ne fonctionne pas sur une autre page

Question

J'ai développé un thème wordpress qui accepte à la fois une mise en page unique et des pages séparées (c'est-à-dire des pages qui s'éloignent de la première page). Comme avec la plupart des mises en page simples, vous cliquez sur un élément nav et il fait défiler vers cette section. J'ai réalisé cela en donnant un identifiant à la section et en plaçant cet identifiant dans le lien du menu (c'est-à-dire #about ou #contact).

Ce code, puis fait défiler à la section de la page:

jQuery(document).ready(function($){ 
jQuery('a[href*=#]').click(function (e) { 
    e.preventDefault(); 

    var navHeight = jQuery('#header').height(); 
    var id = jQuery(this).attr('href'); 
    var scrollTo = jQuery(id).offset().top-navHeight; 

    jQuery('html,body').animate({ 
     'scrollTop': scrollTo 
    }, 500); 
}); 

}); 

Le problème que je vais avoir, est quand je quitter cette page, puis cliquez sur un élément de menu qui généralement faites défiler la page - Les éléments du menu ne fonctionnent pas.

J'ai essayé d'utiliser l'URL complète et d'utiliser '/ # id' mais aucune de ces options ne fonctionne. Y a-t-il une solution de contournement que je peux utiliser ici?

Answer 1

Peut-être que vous pouvez essayer le code suivant

jQuery(document).ready(function($){ 

    // The nav height can be set here if it will be always the same 
    var navHeight = jQuery('#header').height(); 

    // Check if we have a hash (when we come back on the home) 
    if(window.location.hash !== "") { 

     var scrollTo = jQuery(window.location.hash).offset().top-navHeight; 

     jQuery('html,body').animate({ 
      'scrollTop': scrollTo 
     }, 500); 

    }// if 

    // Use your previous code if we're on the home page (thanks WP body_class()) 
    jQuery('.home #nav a[href*=#]').click(function (e) { 
     e.preventDefault(); 

     var id = jQuery(this).attr('href'); 
     var scrollTo = jQuery(id).offset().top-navHeight; 

     jQuery('html,body').animate({ 
      'scrollTop': scrollTo 
     }, 500); 
    }); 

}); 

Il peut contenir une erreur, ou vous devrez peut-être faire quelque changement, mais l'idée générale est ici.

Le principal changement est que nous vérifions simplement si nous avons un hash dans l'URL actuelle, et si c'est le cas, nous faisons défiler l'élément.

Vous devez modifier les liens de votre menu avec l'URL absolue (ou vers /index.php#lorem) car vos liens sont déjà en douane cela ne devrait pas vous toucher autant.

espère que cela peut vous aide

Rappelez-vous que je ne l'ai pas testé ce code, vous pouvez donc faire face à des problèmes.

Answer 2

Voici le travail que j'ai fini par utiliser. Le problème était que le code que j'utilisais utilisait l'attribut 'href' comme ID pour la section vers laquelle il devait défiler, cela posait 2 problèmes:

1) Lorsque vous naviguez vers une page différente, si votre URL est simplement '#sectionID' alors cela ne fonctionnera pas sur la nouvelle page (sauf s'il y a une section avec cet ID - mais vous ne voulez probablement pas que le menu défile là même s'il y en a)

2) Si vous essayez d'utiliser l'URL complète (c.-à-d. http://yourwebsite.com/#sectionID) puis le code jquery ne peut pas l'utiliser comme ID pour la section vers laquelle il doit faire défiler. La solution était assez simple - obtenir le code pour regarder un attribut différent pour prendre l'ID de la section - dans ce cas, j'ai utilisé l'attribut 'rel' comme cela est construit dans les options du menu WordPress.

Le nouveau code ressemble à ceci:

jQuery(document).ready(function($){ 
jQuery('a[href*=#]').click(function (e) { 
    e.preventDefault(); 

    var navHeight = jQuery('#header').height(); 
    var id = jQuery(this).attr('rel'); 
    var scrollTo = jQuery('#' + id).offset().top-navHeight; 

    jQuery('html,body').animate({ 
     'scrollTop': scrollTo 
    }, 500); 
}); 

}); 

maintenant dans les options de menu que je utilise '/ # sectionID' comme le lien et 'sectionID' comme la relation de lien.

Fonctionne comme un charme.