0

我正在尝试添加这样的 javascript 媒体查询

JS

if(width <= 1024), scroll = 480;
    scroll = width > 768 ? 360 : 240;

到这样的事情。

编辑 - 我正在尝试根据屏幕宽度向 a#content 添加一个变量。即：如果 1024 = scrollTop 500, 768 = 360, 320 = 200

JS

$("a[href='#content']").click(function () {
    $("html, body").animate({
        scrollTop: $("body").scrollTop() == 0 ? 360 : 0
    }, "slow");
    return false;
});

任何帮助或建议都会被极大地接受:)

4

1 回答 1

0

简单的滚动顶部

尝试这个：

$("a[href='#content']").on('click',function(e) {
    e.preventDefault();
    var $width = $(window).width(),
        $scrollTop;
    
    if($width > 1024){
        $scrollTop = 500;
    } else if($width > 768){
        $scrollTop = 360;
    } else {
        $scrollTop = 0;
    }

    $('html,body').animate({scrollTop:$scrollTop},800);
});

这会在每次单击时获取屏幕宽度，从顶部分配您想要的像素高度，并适当地对其进行动画处理。您可以根据需要修改语句中的宽度if以及动画速度，但应该可以。

以jsFiddle为例（向下滚动窗口查看链接，1000px向下滚动显示动画scrollTop）

切换 scrollTop（因为你问过）

有很多方法可以在分配的值之间切换，但我总是更喜欢使用类：

$("a[href='#content']").on('click',function(e) {
    e.preventDefault();
    var $width = $(window).width(),
        $this = $(this),
        $scrollTop = 0;

    if($this.hasClass('Top0')){
        $this.removeClass('Top0');
    } else {
        $this.addClass('Top0');
        if($width > 1024){
            $scrollTop = 500;
        } else if($width > 768){
            $scrollTop = 360;
        }
    }

    $('html,body').stop().animate({scrollTop:$scrollTop},800);
});

这涉及更多一点。首先，$scrollTop变量在每次点击时设置为 0。然后它检查链接是否有 class Top0，如果有，那么它只是删除 class，保留 0 值。如果该类尚不存在，它将添加该类并检查它是否与其他条件匹配，首先> 1024，然后> 768。如果它匹配这些项目中的任何一个，它将分配适当的值，否则$scrollTop将再次保持 0。非常轻量级和封装。

还有一点需要注意的是，我.stop()在动画之前添加了；由于您的动画现在正在切换并可能重复触发，因此您不希望动画将其执行排队。.stop()将防止这种情况发生。这样做时我也缓存$(this)了，因为有几个引用它；没有必要，只是好的做法。

于 2013-05-28T19:57:25.047 回答