Javascript jquery响应调整大小不起作用

我想检查（调整大小时）窗口宽度，然后加载脚本的特殊部分。当浏览器窗口的宽度小于500px时，我想滚动到div的顶部（单击菜单链接时），当浏览器窗口的宽度大于500px时，我想滚动到div的垂直中间（单击菜单链接时）。它不知怎么地起作用了，但速度很慢，而且有车

首先，我创建“调整大小”函数 然后我检查浏览器的宽度

(function($){

    // on load
    $(window).resize(function(){
        var current_width = $(window).width(); //check width

            $('.go').click(function (e) {

                if(current_width > 700){ // when min-width 700px than go to center of DIV

                    e.preventDefault();
                    var $box = $('.box').eq($(this).data('rel') - 1);

                    $('html, body').animate({
                        scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2 // scroll to verticall middle of div
                    }, 200);

                }


                else if(current_width < 700){ // when max-width 700px than go to top of DIV

                    e.preventDefault();
                    var $box = $('.box').eq($(this).data('rel') - 1);

                    $('html, body').animate({
                        scrollTop: $box.offset().top + 0 // scroll to top of div
                    }, 200);

            }

        });
    });

})(jQuery);

（函数（$）{
//装载
$（窗口）。调整大小（函数（）{
var current_width=$（窗口）.width（）；//检查宽度
$（'.go'）。单击（函数（e）{
如果（当前宽度>700）{//当最小宽度为700px时，转到DIV的中心
e、 预防默认值（）；
var$box=$（'.box'）.eq（$（this.data（'rel'）-1）；
$（'html，body'）。设置动画({
scrollTop:$box.offset（）.top-（$（窗口）.height（）-$box.outerHeight（true））/2//滚动到div中间
}, 200);
}
如果（当前_宽度<700）{//当最大宽度为700px时，则转到DIV顶部
e、 预防默认值（）；
var$box=$（'.box'）.eq（$（this.data（'rel'）-1）；
$（'html，body'）。设置动画({
scrollTop:$box.offset（）.top+0//滚动到div的顶部
}, 200);
}
});
});
})（jQuery）；

当我用“文档准备就绪”时，一切正常。。。但是“文档大小调整”会带来问题

更新-以这种方式工作：

$(".go").click(function(){

            if ($(window).width() < 800) { // if window smaller than 800px    
                var $box = $('.box').eq($(this).data('rel') - 1);
                $('html, body').animate({
                    scrollTop: $box.offset().top - 0
                }, 200);
            }

            if ($(window).width() > 800) { // if window bigger than  800px
                var $box = $('.box').eq($(this).data('rel') - 1);
                $('html, body').animate({
                    scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
                }, 200);
            }

        });

$（“.go”）。单击（函数（）{
if（$（window）.width（）<800）{//if窗口小于800px
var$box=$（'.box'）.eq（$（this.data（'rel'）-1）；
$（'html，body'）。设置动画({
scrollTop:$box.offset（）.top-0
}, 200);
}
if（$（window）.width（）>800）{//if窗口大于800px
var$box=$（'.box'）.eq（$（this.data（'rel'）-1）；
$（'html，body'）。设置动画({
滚动顶部：$box.offset（）.top-（$（窗口）.height（）-$box.outerHeight（true））/2
}, 200);
}
});

也许是个坏主意，但您可以在css中尝试以下内容：

@media screen and (min-width: 480px){
    $("body").css({"position":"absolute", "top":"12px", "left":"12px"}); //Set your x and y 
}

@media screen and (min-width: 768px){
    $("body").css({"position":"absolute", "top":"22px", "left":"22px"}); //Set other stuff
}

不需要javascript:）

---

PS：未测试

最好像这样附加事件处理程序：

var resizeTimeout; //the timeout prevents triggering the resize event more than once
$(function () {
    $(window).resize(function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(resize, 500);
    });

    $('.go').click(function (e) {

    });
});

function resize() {
    if ($(window).width() > 700) {

    } else {

    }
}

---

每次调整浏览器的大小时都会附加事件处理程序。是。。。还有别的办法吗？光装是不够的，像这样吗？不起作用。。。函数resize（）；@herrfischer事实上，在这种情况下，您并不真正需要

$（窗口）.resize（）

事件处理程序，只需要单击处理程序。是的，但我必须以响应的方式检查屏幕宽度。嗯，我想我是以错误的方式实现的吗？@herrfischer您使用以下命令检查宽度：

$（窗口）.width（）

。顺便说一下，如果您在启用Firebug的情况下尝试代码，您将看到错误。在调整大小事件中，

此

就是窗口。