我的JQuery向下滚动有效，但向上滚动根本不起作用

Question

I've put in a html several divs with IDs in a row prepended with the letter d, eg: #d1, #d2, #d3... Then i created the javascript code below:

    var pos = 0;
$("#button-up").on('click', function(e) {
    e.preventDefault();
    if(pos > 1){
    pos -= 1;
    $("html, body").stop().animate({
        'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});

$("#button-down").on('click', function(e) {
    e.preventDefault();
    if(pos < 10){
    pos += 1;
    $("html, body").stop().animate({
        'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
};
});
    window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
});

Finally my site scrolls down when i click the button-down, but i need to click twice the button-up for it scrolls up. Why? Is there a better way than this that gets the expected result?

Answer 1

I made it work changing this part:

 window.addEventListener("scroll", function(event) {
var posi = this.pageYOffset;
if(posi-(pos-1)*1070+50 >= 1070){pos += 1} else if((pos-1)*1070+50-posi <= -1070){pos -= 1};
 });

with this one:

     window.addEventListener("mousewheel", function(e) {
    e.preventDefault();
    console.log('passou por 6');
    var evt = window.event || e //equalize event object     


    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

if(delta > 0) {
    if(pos > 1){
            console.log('passou por 3');
            pos -= 1;
            $("html, body").stop().animate({
                'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
            };
    //scroll up
    console.log('cima');
}
else{
    if(pos < 10){
            pos += 1;
            $("html, body").stop().animate({
                'scrollTop': $("#d"+pos).offset().top-300},200,"swing");
        };
    console.log('baixo');
    //scroll down
}; 
});

Answer 2

Use jquery scoll function

$(window).scroll(function(event){ 
    // your code
});