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");
});

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

Answer 2

可能希望在页面加载完成后运行此代码。

$(function(){
      /*
        your code here
      */
});

Answer 3

这是解决我问题的所有答案和建议的组合。请注意，以下内容位于页面底部，就在</body>

之前

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

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

3 个答案: