jQuery each function not working for scroll top animation-CodePudding

I try to use the jQuery each function for scroll top animation in pagination each click but each function not working well it's working the first time only. Here are the code

$(".wp-pagenavi > a").each(function(i){
    $(this).click(function(){
        var scroll = $("html, body");
        scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { }); 
        console.log("click"   i);
    });
});

Please help me to reach out form this issue.

CodePudding user response：

Have a look at the following simplified fiddle: https://jsfiddle.net/f46dnaue/3/

Is this the behaviour you are experiencing? In the fiddle, i represents the index of the element being clicked. Clicking either element results in console output on every click.

Regarding your scrolling, should it always scroll to 400? If scroll is defined as 400, it is going to stay 400 no matter the number of clicks - so if you want your page to scroll by 400px steps you need to save the current scrollTop value and add an extra 400 to it for every click.

CodePudding user response：

It is quite possible some of the target are loaded after DOM ready event in which case you would have to change your code to:

$(document).on('click', '.wp-pagenavi > a', function() {
    var scroll = $("html, body");
    scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { }); 
    console.log("click");
});