jQuery实现平滑滚动到元素并高亮效果的问题排查

我帮你仔细检查了这段实现平滑滚动+目标高亮的jQuery代码，发现几个关键问题导致它无法正常运行，咱们一步步来梳理和修复：

存在的问题 #

• 语法错误：括号不匹配+参数格式错误
  你在animate方法里的写法有误，把scrollTop的目标值和动画速度放在了同一个括号里，而且没有正确闭合animate的调用括号。jQuery的animate第一个参数是样式对象，第二个参数才是动画速度/配置项，原代码的写法会直接导致语法报错。
• 缺少目标元素存在性校验
  如果点击的链接对应的锚点（this.hash）不存在，$target就是空的，后续调用offset()会直接抛出错误，中断代码执行。
• 可选：类名拼写疑问
  你写的触发类是.scrollt0，看起来像是scrollTo的笔误，如果你的HTML里类名确实是这个就没问题，但如果是拼写错误，也会导致点击事件不生效。

修复后的完整代码 #

jQuery(function($) { 
    $(".scrollt0").click(function(event) { 
        // 先阻止默认锚点跳转行为，避免页面突然跳走
        event.preventDefault(); 
        // 获取目标元素
        var $target = $(this.hash); 
        
        // 先判断目标元素是否存在，避免报错
        if (!$target.length) {
            return;
        }
        
        // 平滑滚动到目标位置（偏移220px）
        $('html,body').animate(
            { scrollTop: $target.offset().top - 220 },
            'slow' // 动画速度
        ); 
        
        // 添加高亮类，1.4秒后自动移除
        $target.addClass('hilight'); 
        setTimeout(function() {
            $target.removeClass('hilight');
        }, 1400); 
    }); 
});

补充：高亮样式的CSS #

要让高亮效果看得见，你需要给.hilight类添加样式，类似Stack Overflow的效果可以这样写：

.hilight {
    background-color: #fff9c4; /* 柔和的浅黄色高亮 */
    transition: background-color 0.3s ease-out; /* 可选：添加淡出过渡，让高亮消失更自然 */
}

关键修复点说明 #

1. 调整了event.preventDefault()的位置，确保先阻止默认跳转，避免页面先跳转到锚点再执行平滑滚动的冲突。
2. 增加了$target.length的判断，当目标元素不存在时直接退出函数，防止报错。
3. 修正了animate的语法结构，正确传递样式对象和动画速度，并且闭合了所有括号，解决了核心语法错误。
4. 保留了你原本的高亮逻辑，1.4秒后自动移除高亮类，符合需求。

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