如何使用jQuery滚动到指定元素且支持自由上下滚动？

你的代码里scrollTop的计算逻辑冗余，$(".highlights").offset().top - $("html,body").offset().top + $("html,body").scrollTop() 其实等价于 $(".highlights").offset().top（因为根元素的offset.top始终为0），这种多余的计算可能导致动画结束后页面滚动状态异常，引发无法自由滚动的问题。

下面是两种可靠的解决方案：

方法一：简化jQuery animate写法 #

直接使用目标元素的偏移量作为滚动目标，同时在动画结束后清理队列，确保滚动功能恢复正常：

$('html, body').animate({
    scrollTop: $('.highlights').offset().top,
    scrollLeft: 0
}, 300, function() {
    // 清除动画队列，避免残留影响后续滚动
    $('html, body').stop(true, true);
});

方法二：使用原生JS scrollIntoView（推荐） #

现代浏览器对原生平滑滚动支持很好，这种方式更稳定，不会出现滚动锁定问题：

$('.highlights')[0].scrollIntoView({
    behavior: 'smooth', // 平滑滚动
    block: 'start'      // 元素对齐视口顶部，可选'center'/'end'
});

额外提示 #

如果页面有固定导航栏，需要减去导航栏高度避免元素被遮挡：

const navHeight = $('nav').outerHeight();
$('html, body').animate({
    scrollTop: $('.highlights').offset().top - navHeight
}, 300);

另外检查页面中是否有其他监听scroll事件并阻止默认行为的代码，这也会导致无法正常滚动。

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