javascript - 为什么我的scrollTo 动画不起作用？

Question

我试图在屏幕小于特定页面宽度时激活一段 JavaScript。为此，我在脚本中添加了一些媒体查询，如下所示:

 <script>
    var jmediaquery = window.matchMedia( "(max-width: 580px)" );
       if (jmediaquery.matches) {
       $("#navigation a").click(function() {
           var navigationId = $(this).attr("href");
           $("html, body").animate({scrollTop: $(navigationId).offset().top -60},"slow");
           return false;
       });
    }
</script>

但是，当我运行它时，动画和媒体查询都不起作用。这是为什么？

编辑:JSFiddle

为了扩展“不起作用”，最终目标是让scrollTo函数仅在屏幕尺寸小于指定宽度时起作用。当超过规定宽度时，该功能不适用。我上面的代码似乎禁用了动画，并且无论屏幕尺寸如何都可以工作。

编辑2:按照A.Wolf的建议添加了("html, body")。

Answer 1

将其包含在 document.ready() 子句中。该控件可能尚未加载。

或者你可以尝试这样的事情:

$(document).ready(function () {
// scroll to error if present
if ($('div.error').length > 0) $("html, body").animate({ scrollTop: $(document).height() }, "fast");
});

编辑:我忘记添加上面的代码假设错误消息位于页面的底部。