Offset Top

Hello,
Petit souci sur du javascript, j'ai en fait deux flêches pour monter descendre dans mes sections sur chaque page, le hic c'est que j'ai un menu fixe en haut et ça masque certains elements, du coup j'aimerais mettre un offsetTop, pourriez vous me guider car je suis un peu paumé, j'ai récup un code d'un JsFiddle qui marche bien, il ne me manque que l'offset Top pour être parfait.
Merci par avance.

Voici mon code html

<div id="scroll-section" class="arrows">
	<a href="#" class="arrow-up prev-section"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
	<a href="#" class="arrow-down next-section"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a>
</div>

et mon terrible code Js que je ne comprend pas (et que je ne comprendrais surement jamais...)

var sections = $('.panelSection');
console.log(sections);
var i =0;
var scrolto = 0;

function next(){

    if(i == 0){
        $('.prev-section').show();
    }
    if(i < sections.length -1){
        i++;
        if(i == sections.length -1){
             $('.next-section').hide();   
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }else{
        alert('end reached');
    }
}
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
         $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }    
}
$('html').keydown(function(e){
    if(e.which == '38'){
        prev();    
    }
   if(e.which == '40'){
        next();    
    }
});
$('.next-section').click(function(e){
   e.preventDefault();
   next();
});
                         
$('.prev-section').click(function(e){
   e.preventDefault();
   prev();
});                       

Et l'eau,

Si j'ai bien saisi ta problématique, il faut que tu calcules la hauteur de ton élément fixe et que tu reportes ce calcule dans tes animate (en plus ou en moins). Je t'ai donné une piste mais tu dois factoriser ton code...

//...
$('html, body').animate({
    scrollTop: sections[i].offsetTop - $('header').outerHeight()
}, 2000);
//...

Modifié par niuxe (22 Mar 2018 - 16:46)

niuxe a écrit :
Et l'eau,

Si j'ai bien saisi ta problématique, il faut que tu calcules la hauteur de ton élément fixe et que tu reportes ce calcule dans tes animate (en plus ou en moins). Je t'ai donné une piste mais tu dois factoriser ton code...

//...
$('html, body').animate({
    scrollTop: sections[i].offsetTop - $('header').outerHeight()
}, 2000);
//...

C'est exactement ça par contre dans ce que tu m'as mis, je dois mettre la hauteur (70px) ou ? Car je suis dépassé par le Js la. =/

J'ai vu ton mp....

Ton élément fixe fait 88px. la section X est à (par exemple) : 300px du bords haut de la page. Ce qui veut dire que tu dois soustraire 300 - 88. Si le JS ne comprend pas ton expression, il y a de grandes chances que tu aies recours à parseInt() afin que tes 2 données soient équivalentes en type (Number). Après, à la fin de ton expression, tu rajoutes "px".

Ça donne un code comme :

$('html, body').animate({
    scrollTop: (parsInt(sections[i].offsetTop) - parseInt($('nav:first').outerHeight())) + 'px'
}, 2000);

Modifié par niuxe (22 Mar 2018 - 17:34)

Je viens de tester et ça ne fonctionne pas. , je l'ai bien ajouté à la suite de mon script et nada, ça reste comme ça. les mysteres du Js. lol