jQuery Resize funktioniert nicht konsistent

Question

Laufen in ein Problem, wo meine Funktion wie erwartet funktioniert, wenn die Breite des Fensters größer als 1024px ist, funktioniert wie erwartet, wenn ich Größe kleiner als 1024px Größe, aber wenn ich es skalieren funktioniert nicht.

Was versuche ich zu erreichen, eine scrollTop Funktion auszuführen, aber nur, wenn der Browser weniger als 1024px Breite ist. Ich kann den Fehler, den ich gemacht habe, einfach nicht sehen.

Hier ist meine Codepen und JS-Code: Codepen

function buttonClick() { 
    var width = $(window).innerWidth(); 
    console.log(width); 

    if (width < 960) { 
    $('.click').on('click', function() {  
     $('body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300); 
    }); 
    } 
} 


$(function() { buttonClick(); }) 
$(window).on('resize',function() { 
    buttonClick(); 
}); 

Answer 1

Ihr Hauptproblem ist, dass Sie die Neuzuweisung immer und immer wieder buttonClick() auf jeder Größe ändern Schritt - die zu .click daher mehrere click Handler hinzufügt ...

ich würde es auf diese Weise tun:

$(function() { 

    function doIfLessThan960() { 
    var width = $(window).innerWidth(); 
    if (width < 960) { 
     $('html, body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300); 
    } 
    } 

    $('.click').on('click', doIfLessThan960); 

}); 

Das ist: Definieren Sie, ob der Button etwas tun soll, nachdem wir ihn angeklickt haben.

jsBin demo ← wird die Taste funktioniert nur, wenn die Fensterbreite von weniger als 960

ist