Bonjour à tous,
je refais actuellement mon portfolio et en même temps j'apprends le Jquery.
Mon portfolio

J'ai donc fait un contenu qui est séparé en section. Avec mon menu, en cliquant sur un lien, je suis directement envoyé vers ma section avec un scroll animé (celui du tuto de grafikart.fr).

Le soucis, c'est que sur mon menu j'ai une animation jquery. Au survol d'un lien celui se décale de 30px et lorsqu'on clique dessus, il reste à 30px d'écart.

J'ai donc deux script (ci-dessous).
Lorsque j'enlève le return false (du deuxième script, je l'ai marqué), cela fonctionne comme je veux, mais le scrolling animé n'est pas fluide.

Merci d'avance pour votre aide.

$(document).ready(function(){
    // Intialisation du menu
    var sCurrentAction = 'action1';
    $('#' + sCurrentAction).find('img').animate({ left: '30px' }, {queue: false, duration: 600});
    $('ul#menu li').hover(function(){
                $(this).find('img').animate({ left:'30px' },{queue:false,duration:600});    
            },
            function(){
                if (this.id != sCurrentAction)
                    $(this).find('img').animate({ left:'0px' },{queue:false,duration:600});
            });

    $('ul#menu li').click(function () {
        // On retire l'ancien "action"
        if (sCurrentAction != '')
            $('#' + sCurrentAction).find('img').animate({ left: '0px' }, {queue: false, duration: 600});
        // On met à jour l'action actuelle
        sCurrentAction = this.id;

    });

});

/*  Scroll animŽ sur toutes les ancres
** Par Grafikart : www.grafikart.fr
************************************** /
$(document).ready(function(){
    $('a[href^=#]').click(function() {
        cible=$(this).attr('href');
        scrollTo(cible);
        return false; //ce retourn false !!
    });

});
function scrollTo(cible){
    if($(cible).length>=1){
        hauteur=$(cible).offset().top;
    }
    else{
        hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
    }
    hauteur -= (windowH()-$(cible).height())/2;
    $('html,body').animate({scrollTop: hauteur}, 1500,'easeInQuint');
    return false;
}
function windowH(){
    if (window.innerHeight) return window.innerHeight ;
    else{return $(window).height();}
}

1 réponse


manimanu
Auteur

J'ai oublié d'ajouter ceci :

Avec le script du scrolling animé, les liens sont animés au survol mais lorsque je clique sur un, il ne reste pas à 30px d'écart, par contre je suis bien dirigé vers la section que je veux avec scrolling animé.