将jquery应用于单个媒体查询

Question

我正在尝试根据以下与媒体查询相关的不同值添加到jquery。

HTML

<div id="content">
</div>

JS

$("html,body").animate({scrollTop: 360}, 1000);

期望的效果，类似于

@media handheld, only screen and (max-width: 1024px) {

$("html,body").animate({scrollTop: 660}, 1000);

}

@media handheld, only screen and (max-width: 768px) {

$("html,body").animate({scrollTop: 260}, 1000);

}

最理想的做法是什么？

Answer 1

正如评论者所说，你不能像这样一起使用JS和CSS。你可以这样做：

var width = $(window).width(), scroll = 360;

if(width <= 1024){
    scroll = width > 768 ? 660 : 260;
    // if (width > 768) means width must be 769-1024 so scroll = 660.
    // else the width must be 768 or below so scroll = 260 
}

$("html, body").animate({scrollTop: scroll}, 1000);