ScrollTop函数失效排查：添加async属性后脚本无法正常执行

嘿，问题的根源其实很简单——你加的async属性打乱了脚本的执行顺序，导致你的代码在jQuery还没加载好的时候就跑起来了！

先看你写的这段代码：

<script async> $(window).scrollTop(1000); </script>

之前没加async的时候，浏览器是按照脚本在HTML里出现的顺序依次执行的（我猜你的jQuery脚本肯定放在这段代码前面对吧？），所以当执行到$(window).scrollTop(1000)时，$（jQuery的全局变量）已经存在了，功能自然正常。

但加上async之后，浏览器会把这个脚本当成“异步任务”——它会在后台加载，加载完就立刻执行，完全不管前面的jQuery脚本有没有加载完成。这时候大概率你的scrollTop代码先跑了，而$还没被定义，代码直接报错失效。

给你几个解决方案，按需选择：

• 最直接的方案：去掉async
  如果这段脚本不需要异步执行，直接删掉async就行，回到原来的顺序执行逻辑：

  <script> $(window).scrollTop(1000); </script>
  

• 必须保留async？那就等jQuery加载完再执行
  你可以用DOM加载完成事件，或者先检查jQuery是否存在，再执行代码：

  // 原生DOM事件方案，兼容性好
  <script async>
    document.addEventListener('DOMContentLoaded', function() {
      // 先确认jQuery已经加载
      if (typeof $ !== 'undefined') {
        $(window).scrollTop(1000);
      }
    });
  </script>
  

  别直接用jQuery的$(document).ready()包裹，因为如果这段脚本比jQuery加载得早，$都不存在，这个方法根本没法触发。

• 想要异步又要保证顺序？用defer代替async
  defer属性和async一样是异步加载，但它会保证脚本按HTML里的顺序执行，而且会等DOM解析完成后才运行。只要把你的jQuery脚本和这段scrollTop脚本都加上defer，就能既实现异步加载，又保证执行顺序：

  <!-- 先加载jQuery，加defer -->
  <script src="你的jQuery路径.js" defer></script>
  <!-- 再放你的scrollTop脚本，也加defer -->
  <script defer> $(window).scrollTop(1000); </script>
  

本质就是一句话：你的代码依赖jQuery，所以必须保证jQuery先加载完成，再执行这段scrollTop逻辑——async恰恰破坏了这个顺序，导致功能失效。

内容的提问来源于stack exchange，提问作者neerajbatheja