使用jQuery animate实现页面回顶时触发Uncaught TypeError错误求解决

这个错误其实很常见，核心原因是浏览器没有调用到jQuery的animate方法，反而触发了原生DOM元素的animate() API——这两个方法的参数规则完全不一样，原生的animate对duration参数有严格要求，才会抛出这个报错。下面给你几个针对性的解决办法：

1. 先确认jQuery是否正确加载并可用 #

先打开控制台执行typeof $：

• 如果返回"undefined"：说明你的页面根本没加载jQuery，得先引入它。可以在页面的<head>或者底部加这段代码：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 如果返回"function"但还是报错：大概率是$被其他库（比如Zepto、Prototype）占用了，这时可以直接用jQuery代替$来写代码：

  jQuery("html, body").animate({scrollTop:0}, "slow");
  

  或者开启jQuery的无冲突模式，自定义一个变量来代替$：

  var $j = jQuery.noConflict();
  $j("html, body").animate({scrollTop:0}, "slow");
  

2. 确保代码在DOM就绪后执行 #

如果jQuery已经加载，但代码执行时DOM还没完全渲染，也可能导致选择器找不到元素，间接触发这个错误。你可以把代码包在jQuery的就绪函数里：

$(document).ready(function() {
    // 这里写你的滚动代码
    $("html, body").animate({scrollTop:0}, "slow");
});

或者直接把script标签放在页面的</body>标签前，等DOM加载完成后再执行代码。

3. 原生JS替代方案（无需jQuery） #

如果不想依赖jQuery，用原生JS实现平滑滚动回顶部其实更简单，兼容性也不错（除了IE）：

window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

内容的提问来源于stack exchange，提问作者Steffi Keran Rani J