Aide débutant Jquery

doudouzeb
Javascript

Bonjour, j'aimerais apprendre seul jquery, pouvez vous me conseiller des "sélecteurs" ou "attr" ou je ne sais pas trop comment on appel ca pour que j'essayes de m'en sortir avec mon projet !

J'ai un menu fixe en haut de mon site sur une page et j'aimerais quand je clic sur l'un des liens du menu qui sont en <a><li> que ca fasse un slide vers l'endroit de la page unique (index.php) que j'ai créer !

1-Donc pour mon site one page, un menu fixe avec class ou sans class?
2-Quel function jquery pour que je puisse apprendre à faire un slide en cliquant sur chaque lien qui me ramène vers la div id="liencliqué" Ex: Lien "Association ramène vers #association div id="association

Merci pour votre aide, je suis un débutant qui souhaite apprendre en me guidant !

5 réponses

mgeoffray
Réponse acceptée

Voilà ton code expliqué :

jQuery(document).ready(function(){
   // Evèvement "click" sur un lien de ta div #barrenav
   jQuery('#barrenav a').click(function(){ 
        // On retire la class "active" de tous les liens
        jQuery('#barrenav a').removeClass('active');
        // On rajoute la class "active" sur le lien cliqué
        jQuery(this).addClass('active'); 
        // On récupère la valeur de l'attribut "href" du lien cliqué grâce à la fonction .attr() de jQuery et on stock la valeur dans une variable "id"
        var id = jQuery(this).attr('href');
        // On appelle la fonction scrollTo() en passant comme paramètre la variable "id" récupérée au dessus
        scrollTo(id);
        // On empêche toute autre action du lien
        return false;
   });

    // On déclarer une fonction scrollTo() qui prend un paramètre "target" (nom que tu souhaites)
   function scrollTo(target){
       // On stock l'élément target dans une variable
       var element = jQuery(target);
       // On test l'existance du paramètre
       if(element.length>=1){
           // On récupère la distance entre le haut de ta page et le haut de ta div
           height=element.offset().top;
       }
       // On anime le scroll jusque la valeur récupérée au dessus
       jQuery('html,body').animate({scrollTop: height}, 1200);
       return false;
   }

});

Imagines toi avec un exemple concret, le click sur un lien avec un href="#top" :

  • ta variable "id" sera égale à "#top"
  • ta fonction sera appelée de cette façon scrollTo("#top");
  • la fonction scrollTo() récupérera la distance entre le haut de ta page et ta div ayant l'id "top", par exemple 50px
  • puis la fonction scrollTo() animera le scroll jusqu'à ce que ta page soit à 50px du haut de ta page, donc en haut de ta div d'id "top"

En espérant avoir été assez clair ;)

mgeoffray

Salut,
pour répondre à toutes tes questions je peux te conseiller d'aller voir ce tuto http://www.grafikart.fr/tutoriels/jquery/scroll-top-jquery-233.
Si tu souhaites chercher d'autres informations sur ce système cherches du côté des plugins de navigation par ancres.
Tu peux aussi aller voir tous les autres tutoriels sur ce site en activant le filtre "jQuery" tu vas beaucoup y apprendre ;)

djtec

Voici un tuto pour créer un site en one page comme tu recherche je pense http://www.grafikart.fr/tutoriels/html-css/portfolio-integration-236

doudouzeb
Auteur

Merci, j'ai réussi à faire ce que je voulais sur mon site comme sur un site One Page mais j'aimerais en savoir plus sur le code ! En Effet la syntaxe me passionne et j'aimerais en savoir plus sur le sujet !

J'ai regardé beaucoup de Tuto Jquery mais les explications sur le code sont clair mais ca ne vas pas plus loin dans la compréhension du code !

Pourquoi faire ainsi, pourquoi faire comme ca? pkoi ce mot plutôt qu'un autre et l'ambiguité de certain mot anglais comme "target" etc !
Pouvez Vous m'éclairer? J'ai repris tout ou partie du code de jeremy (merci à lui) !

la function scrollTo ??? pourquoi (id) derrière d'ou vient t'il?
et après scroolTop en bas il y a des confusions pour moi qui suit débutant !

Le pire c'est que sa fonctionne mais que j'aimerais bien comprendre clairement comment !! lol

$(document).ready(function(){
   $('#barrenav a').click(function(){ //Quand on clic sur un lien de la div barrenav alors...
        $('#barrenav a').removeClass('active');//On retire la class Active de tout les liens puis
        $(this).addClass('active');//on rajoute la class active sur le lien cliqué
         var id = $(this).attr('href');//on créé un élément id?

        scrollTo(id);//on lis la function??
        return false;
   });
   function scrollTo(target){//pourquoi scrollTo, pkoi target??
       if($(target).length>=1){
           height=$(target).offset().top;
       }
       $('html,body').animate({scrollTop: height}, 1200);
       return false;
   }
});
doudouzeb
Auteur

Merci Beaucoup de ton temps passé pour expliquer pas à pas le code, c'est vraiment parfais, pour un débutant comme moi, ton explication est très clair !!

Merci à toi !