求助：使用jQuery实现轮播横向平滑滚动的问题

核心问题 #

你的代码存在两个关键错误，导致锚点直接跳转而非平滑滚动：

1. 未阻止a标签默认行为：点击锚点时浏览器会优先执行自带的锚点跳转逻辑，直接覆盖你写的JS平滑滚动代码。
2. JS语法与值计算错误：scrollTo变量的赋值存在链式调用断裂问题，且未正确计算目标元素需要滚动的距离。

修正步骤 #

1. 阻止默认跳转：在点击事件中添加e.preventDefault()，彻底禁用浏览器默认的锚点跳转行为。
2. 修正滚动距离计算：正确获取目标元素在滚动容器内的水平偏移量，作为scrollLeft的目标值。
3. 修复语法错误：拆分错误的链式调用，先选中目标元素再计算偏移量。

修正后的完整代码 #

JavaScript代码

$(document).ready(function() {
  $("nav a").click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    
    var $carousel = $('.carousel');
    // 获取目标元素的选择器
    var targetSelector = $(this).attr('href');
    // 计算目标元素相对于carousel容器的水平偏移（含当前滚动距离）
    var scrollTo = $(targetSelector).offset().left - $carousel.offset().left + $carousel.scrollLeft();
    
    // 执行平滑滚动动画
    $carousel.animate({
      'scrollLeft': scrollTo
    }, 500);
  });
});

CSS代码（无修改）

.carousel {
  width: 300px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}

.frame {
  position: relative;
  height: 100px;
  width: 770px;
}

.frame div {
  height: 90px;
  width: 60px;
  float: left;
  margin: 5px;
  background: #39f;
}

HTML代码（无修改）

<div class="carousel">
  <div class="frame">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <div id="d5"></div>
    <div id="d6"></div>
    <div id="d7"></div>
  </div>
</div>
<nav>
  <p><a href="#d1">1</a></p>
  <p><a href="#d6">6</a></p>
</nav>

补充说明 #

• 计算scrollTo时，通过$(targetSelector).offset().left - $carousel.offset().left得到目标元素相对于carousel容器的水平偏移，再加上当前的scrollLeft值，确保滚动位置精准。
• 若无需jQuery，也可使用原生JS实现：用addEventListener监听点击事件，event.preventDefault()阻止默认行为，再通过element.scrollTo({left: scrollTo, behavior: 'smooth'})实现平滑滚动（注意兼容性）。

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