Question

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

JS

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

这样的事情。

编辑 - 我正在尝试根据屏幕宽度为a＃内容添加变量。即：如果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;
});

任何帮助或建议都会被大大接受：）

Answer 1

简单scrollTop

试试这个：

$("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 as example（向下滚动窗口查看链接，向下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。然后它检查链接是否具有类Top0，如果是，那么它只删除该类，保持0值。如果该类已经不存在，它将添加该类并检查它是否与其他条件匹配，先是> 1024，然后是> 768。如果它匹配这些项中的任何一个，它将分配适当的值，否则$scrollTop将再次保持为0.非常轻量级和封装。

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

将jQuery媒体查询添加到＃scrollTop

1 个答案: