JQuery SmoothScroll在Chrome中无滚动动画，Safari正常，求排查解决

你已经把核心逻辑做对了——阻止默认跳转、获取目标位置这些步骤都没问题，Chrome里动画不生效大概率是浏览器对html和body元素的滚动行为处理不一致，再加上可能存在的动画队列冲突导致的。试试下面的修复方案：

调整后的代码 #

$(function(){
  $('.smoothscroll').click(function(e){
    // 用preventDefault精准阻止默认跳转行为，比return false更清晰
    e.preventDefault();
    var targetId = $(this).attr('href');
    var targetScrollTop = $(targetId).offset().top;
    
    // 清空之前的滚动动画队列，避免连续点击导致的动画堆积
    $('html, body').stop(true, true).animate({
      scrollTop: targetScrollTop
    }, 'slow');
  });
});

关键修复点说明 #

• 替换return false为e.preventDefault()：return false会同时阻止事件冒泡和默认行为，可能干扰页面上其他绑定的事件；e.preventDefault()只针对性阻止跳转，更安全。
• 添加stop(true, true)：如果用户快速连续点击多个平滑滚动链接，未完成的动画会堆积在队列里，导致Chrome无法触发新的滚动动画。这个方法会清空队列并立即完成当前动画，确保新指令能立刻执行。
• 缓存目标位置：把$(targetId).offset().top存入变量，避免重复查询DOM节点，虽然不是动画失效的直接原因，但能提升代码性能。

额外排查方向 #

如果上面的调整还是没解决问题，可以检查这两点：

• 是否有其他JS代码修改了scrollTop或者监听了滚动事件，和平滑滚动动画产生冲突。
• 给html和body元素添加CSS样式：height: 100%; overflow-y: scroll;，确保浏览器能正确识别滚动容器。

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