Salut, je bloques depuis longtemps là-dessus, j'ai deux boutons qui sont censés me permettre de scroller vers le bas ou vers le haut de ma page ; en me dirigeant : entre chaque class="titreProfil" -125px !

Sauf que je manque d'expérience, et je n'arrive pas à trouver la logique malgré plusieurs essais et ne trouve pas de docs française pouvant m'aider.

Je dois avoir 5ou 6 titres comportant cette class.
Une âme charitable serait la bienvenue :-)

6 réponses


Nono95
Auteur
Réponse acceptée

Et au final, tu avais raison !
Une fois la version corrigé, je me suis rendu compte que cette fonction disfonctionnait si on descendait sur la page et appuyait après sur le bouton 'descendre à l'élément suivant' .
Cette fonction ne tient pas compte de la position actuelle : window.pageYOffset;
et du coup çà foutait la merde...

Du coup, j'ai fais comme tu m'as conseillé, fonctionnement par id, le souci, c'est que si je suis amené à rajouté des éléments, je serais contraint de modifier la fonction, alors qu'avec le système de classe, c'est automatique.

Si tu as une solution je veux bien, sinon je te fais part de mon travail qui fonctionne parfaitement :
(Du coup, j'ai fais plusieurs fonctions scroll, hi hi)

         /////////////////////
        //                 //
       //     BOUTTON     //
      //     SCROLLER    //
     //                 //
    /////////////////////

    // Variable pour le scroll simple
    hauteurWindow = document.documentElement.clientHeight;

    //Boutton Retour en Haut    

    $('#goNoTop').click(function(event){
        event.preventDefault();   
        destination=window.pageYOffset-(hauteurWindow/2);

        if ((window.pageYOffset)>= 50){
            $('html, body').animate({scrollTop : destination},1500);
        }
    });

    //Boutton Aller en Bas

    $('#goNobottom').click(function(event){
        event.preventDefault();   
        destination=window.pageYOffset+(hauteurWindow/2);
        $('html, body').animate({scrollTop : destination},1500);
        //return false;
    });

    // Variable pour le scroll avancé d'élément en élément

    heightToTalDoc = document.getElementsByTagName('html')[0].offsetHeight;
    heightNavbar = document.getElementById('nav_nav_nav').offsetHeight;

    Moi = document.getElementById('elementProfil1');
    Competences = document.getElementById('elementProfil2');
    Parcours = document.getElementById('elementProfil3');
    CV = document.getElementById('elementProfil4');
    MoiInCarac = document.getElementById('elementProfil5');
    //CentreInteret=document.getElementById('elementProfil6');

    topMoi = Moi.offsetTop;
    topCompetences = Competences.offsetTop;
    topParcours = Parcours.offsetTop;
    topCV = CV.offsetTop;
    topMoiInCarac = MoiInCarac.offsetTop;
    //topCentreInteret = CentreInteret.offsetTop;

    //Boutton Aller à l'élément précédent

    $('#goTop').on('click',function(event){
        event.preventDefault();   

        /* DONNEE */
        heightNavbar = document.getElementById('nav_nav_nav').offsetHeight;
        position = window.pageYOffset;

        var dif_Moi = position-(topMoi-heightNavbar);
        var dif_Competences = position-(topCompetences-heightNavbar);
        var dif_Parcours = position-(topParcours-heightNavbar);
        var dif_CV = position-(topCV-heightNavbar);
        var dif_Caractéristiques = position-(topMoiInCarac-heightNavbar);
        //var dif_CentreInteret = position-(topCentreInteret-heightNavbar);

        dif=[dif_Moi,dif_Competences,dif_Parcours,dif_CV,dif_Caractéristiques/*,dif_Caractéristiques*/];

        /* FIN DONNEE */

        blockToTop: {
            for (var i = 0; i < dif.length; i++) {
                if(dif[i]<=0) {
                    value = dif[i-1];
                    if(dif[i-1] == undefined){
                        value = dif[0];
                    }
                    break blockToTop;
                }

            }
        }

        $('html, body').animate({scrollTop : (position+(-value))},1500);
    });

    //Boutton Aller à l'élément suivant

    $('#gobottom').on('click',function(event){
        event.preventDefault();   

        /* DONNEE */
        heightNavbar = document.getElementById('nav_nav_nav').offsetHeight;
        position = window.pageYOffset;

        var dif_Moi = position-(topMoi-heightNavbar);
        var dif_Competences = position-(topCompetences-heightNavbar);
        var dif_Parcours = position-(topParcours-heightNavbar);
        var dif_CV = position-(topCV-heightNavbar);
        var dif_Caractéristiques = position-(topMoiInCarac-heightNavbar);
        //var dif_CentreInteret = position-(topCentreInteret-heightNavbar);

        dif=[dif_Moi,dif_Competences,dif_Parcours,dif_CV,dif_Caractéristiques/*,dif_Caractéristiques*/];

        /* FIN DONNEE */

        blockToBottom: {
            for (var i = 0; i < dif.length; i++) {
                if (dif[i]<0) {
                    value = dif[i];
                    break blockToBottom;
                }

            }            
            value=dif[dif.length-1];
            break blockToBottom;
        }

        $('html, body').animate({scrollTop : (position+(-value))},1500);
    });
Nono95
Auteur

Voici une petite vidéo si tu as besoin de meiux comprendre mon objectif.
N'y arrivant toujours pas, là je bosse sur autre chose

https://youtu.be/PYo3OaUEZrY

Nono95
Auteur

Coucou, j'ai essayé ta fonction, c'est un bon début pour passer de class en class.
Je possède jquery.
J'ai du changer certaines choses, car sinon çà déconnait :

    $('#gobottom').click(function(e){ // quand on click sur le bouton DOWN
        pos++; // on augemente de 1 la position actuelle
        if(pos > maxPos) { // si on est en dehors du tableau, on ramène au dernier du bas
            pos = maxPos;
        }
        sections[pos].scrollIntoView(); // on scroll jusqu'a l'élément
        return false;
    });

Par contre je n'ai d'animation scroll qui se fait, et je ne sais pas où rajouter le -125px par rapport à ma class lol
Désolé, je suis un peu une quiche, j'apprends au fur et à mesure, je continu à essayer de trouver néanmoins

Nono95
Auteur

Ah oui, et quand c'est le dernier, comment je peux faire pour qu'il scrolle jusqu'en bas même s'il n'y a plus de classe ?
En option au pire

Nono95
Auteur

Coucou Alex, d'abord merci, ton code m'a beaucoup aidé.
Je pense néanmoins que tu as du me laisser des petites fautes volontaires pour m'obliger à corriger et à lire le code vu que tu étais pas sur que j'ai fait quelque chose :-)

La version corrigé :

var position = 'top';
var sections = $('.titreProfil');

function movePos (pos, dir, els) {
    var retrait = 125; // ton décalage de 125 px qui est répercuté uniquement quand on va sur un élément
    var max = els.length-1;

    if(dir === 'up') {
        if (pos === 'top') {
            // on est déja en haut, on y reste
            pos = 0;
        } else if (pos === 'bottom' || pos === max) {
            // on était en bas, on remonte au dernier élément
            pos = max-1;
        } else {
            // on remonte d'un élément
            pos--;
            if(pos <= 0) {
                // si on était déja au premier élément, on va en haut du doc
                pos = 0;
            }
        }
    } else {
        if (pos === 'top' ||pos === 0) {
            // on était en haut, on descend au premier élément
            pos = 1;
        } else if (pos === 'bottom' || pos === max) {
            // on était en bas du doc, on y reste
            pos = max;
        } else {
            // on descend d'un élément
            pos++;
            if(pos >= max) {
                // si on était déja au dernier élément, on va en bas du doc
                pos = max;
            }
        }
    }

    if(pos === 'top' ||pos === 0) {
        alert(pos);
        $("html, body").animate({scrollTop: 0 }, 1250);

    } else if(pos === 'bottom' ||pos === max) {
    alert(pos);
        $("html, body").animate({ scrollTop: $(els[max]).offset().top - retrait }, 1250);
    } else {
    alert(pos);
        $('html,body').animate({scrollTop: $(els[pos]).offset().top - retrait},1250);
    }

    //console.log(pos);
    return pos;
}

$('#goTop').on('click', function(e){
    e.preventDefault();
    position = movePos(position, 'up', sections);
});

$('#gobottom').on('click', function(e){
    e.preventDefault();
    position = movePos(position, 'down', sections);
});
Nono95
Auteur

Ok je regarderai çà plus tard,
là je galère sur les regex javascript sur mon formulaire, aaaaahhhhh.... lol
T'as vu, j'ai bosser !!! :-)
Merci beaucoup en tout cas, ;-)