Boutton scroll de class en class

Hello, je ferai comme ca :
1 - on récupère tous les éléments du DOM avec cette classe : document.getElementsByClassName("titreProfil");
2 - on boucle sur chaque élément
3 - on récupère la position Y de chaque élément et on la stocke dans un tableau
4 - sur tes deux boutons (haut et bas) on fait une fonction qui window.scrollTo(0,Y) avec Y = la position Y de l'élément avec la class titreprofil. Si c'est la première fois alors on commence avec la clée 0, puis ensuite on prend la clé actuelle et on lui met +1, etc.

Après c'est un peu de boulot et peut être que tu peux gérer ca plus simplement avec des ancres #id ?
En général, il est préférable de poser une question expliquant le problème dans sa globalité plutot que poser une question uniquement technique.
Quel est le but final ? parcourir des éléments à partir d'un menu ? il faudrait un screenshot, car peux etre qu'il y'a une facon beaucoup plus simple pour arrive au résultat que tu souhaites.

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

Hello,
Bon déja ca fait plaisir de voir une belle explication en vidéo, c'est clair maintenant.
Tu veux le faire un javascript brut ou avec jQuery ? jQuery on ira plus vite, mais bon si tu n'as pas chargé jQuery dans ton document, on peut s'en passer.
Voila ce que j'ai fait (très rapidement) avec jQuery. J'ai testé et ca fonctionne, après tu peux animer pour que ca soit plus sympa.

    <button id="up" style="position:fixed; top:100px; right:100px; background-color:orange;">UP</button>
    <button id="down" style="position:fixed; top:200px; right:100px; background-color:red;">DOWN</button>
    <section class="scrollStop" style="height:300px;">item 1</section>
    <section class="scrollStop" style="height:300px;">item 2</section>
    <section class="scrollStop" style="height:300px;">item 3</section>
    <section class="scrollStop" style="height:300px;">item 4</section>

(function($){
    var pos = 0; // position de départ
    var sections = $('.scrollStop'); // on sélectionne toutes les sections avec la class
    var maxPos = sections.length - 1; // la dernier position possible

    $('#up').on('click', function(e){ // quand on click sur le bouton UP
        pos--; // on diminue de 1 la position actuelle
        if(pos < 0) { // si on est en dehors du tableau, on ramène au début
            pos = 0;
        }
        sections[pos].scrollIntoView(); // on scroll jusqu'a l'élément
    });

    $('#down').on('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
    });
})(jQuery);

Bon courage.

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

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

Tu as quelle expérience du javascript et de jQuery ?
Car personnellement je n'utilise jamais animate(), donc je suis aller chercher sur google et j'ai trouvé ma réponse...
http://tech-fakhrul.blogspot.fr/2011/09/jquery-version-of-documentscrollintovie.html
http://praveenlobo.com/techblog/how-to-scroll-elements-smoothly-in-javascript-jquery-without-plugins/

Je n'aime pas trop donner des réponses toutes faites sans être sur que la personne n'a pas chechée de son coté, l'as tu fait ? as tu compris mon code ou as tu juste adapté ? as tu des questions de logique sur ce que j'ai ecrit ?

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

    function movePos (pos, dir, els) {
        var offset = 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 = 'top';
            } else if (pos === 'bottom') {
                // on était en bas, on remonte au dernier élément
                pos = max;
            } 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 = 'top';
                }
            }
        } else {
            if (pos === 'top') {
                // on était en haut, on descend au premier élément
                pos = 0;
            } else if (pos === 'bottom') {
                // on était en pas du doc, on y reste
                pos = 'bottom';
            } 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 = 'bottom';
                }
            }
        }

        if(pos === 'top') {
            $("html, body").animate({ scrollTop: 0 }, 250);
        } else if(pos === 'bottom') {
            $("html, body").animate({ scrollTop: $(document).height() }, 250);
        } else {
            $('html,body').animate({scrollTop: $(els[pos]).offset().top - offset},250);
        }

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

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

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

De mon point de vu ca reste une erreur de ne pas utiliser des id différent pour chaque <section id="mesCompetences">, les ancres servent à ca... Avec l'url on arrive à la partie souhaitée directement http://monsite.fr/moncv#mesCompetences

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);
});

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, ;-)