将jQuery媒体查询添加到#scrollTop

我正在尝试添加一个javascript媒体查询，如下所示

JS

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

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

---

任何帮助或建议都将被极大地接受：）

简单滚动条

试试这个：

$("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

语句中的宽度以及动画速度，但应该可以

（向下滚动窗口查看链接，其

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）

，因为有多个引用；没有必要，只是良好的实践。

仅在身体上设置滚动顶部动画在firefox中不起作用。此外，在chrome中，仅设置html动画不起作用。如果你想让它在firefox和chrome中工作，你需要为HTML和主体制作动画。你的编辑实际上会让事情变得更加混乱。你是说当你点击

a

时，你想对

内容做点什么吗？抱歉，把事情弄糊涂了。单击内容应滚动至顶部并向下滑动360px。但是我试图添加一个变量if 1024 slide down 500，if 768 slide down 360i gotchya，再次修改我的答案，以满足我的需求。还提供了JSFIDLE。太好了！！有没有办法切换#content（内容）按钮以在scroll to top（滚动至顶部）和scroll 500（滚动至500）之间切换？