滚动到div id，通过窗口宽度更改条件

Question

我希望单击菜单项时页面滚动到标题下的div id。我现在所拥有的如下。动作应根据窗口宽度而变化。对于800px以下的像素，单击菜单项时标题容器应消失，并且标题高度也不同。该代码有效，但是当我通过单击多次并更改窗口宽度进行测试时，它开始确实变慢了。例如，当我单击“关于”时，它会转到“关于”部分，但大约需要10秒钟……有人知道为什么会这样做吗？我使用“加载大小调整”功能，以便在旋转平板电脑时可以正常工作，而无需刷新。

$(window).on('load resize', function(){
    $('.menu ul li a[href^=#]').click(function(){
    var htmlbody = $('html, body');
    if ($(window).width() > 800) {
        var headerheight = 52;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerheight; 
        htmlbody.animate({scrollTop:position}, 500, "swing");
        return false;
    }else{
        var headerheight = 53;
        $(‘.menu-container’).hide();
        $('.header').removeClass('nav-show');
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerheight; 
        htmlbody.animate({scrollTop:position}, 500, "swing");
        return false;
    }


    });

});