在ES6类中实现jQuery Smooth Scroll遇阻，each循环疑似存在问题

看起来你在ES6类里整合jQuery平滑滚动时踩了典型的上下文绑定和事件处理的坑，我来帮你拆解问题并给出修复方案——你提到的“仅第一个属性生效、无滚动效果”大概率和未阻止默认跳转、jQuery回调的上下文混乱或者目标元素校验缺失有关。

先假设你的JS类代码大概是这样的（毕竟你没贴全完整的脚本）：

class NavScroll {
  constructor() {
    this.navLinks = $('.primary-nav a');
    this.init();
  }

  init() {
    this.navLinks.each(function() {
      $(this).click(function(e) {
        const target = $(this).attr('href');
        $('html, body').animate({
          scrollTop: $(target).offset().top
        }, 500);
      });
    });
  }
}

new NavScroll();

问题根源分析 #

• 未阻止默认锚点跳转：点击带href="#xxx"的链接时，浏览器会默认跳转到对应锚点，这会直接打断你的平滑滚动动画，导致看起来“没效果”。
• jQuery回调的上下文问题：在.each()的普通函数回调里，this指向的是当前遍历的DOM元素，虽然这个场景下不会直接导致失效，但如果后续要访问类的其他属性，很容易出问题。
• 目标元素存在性未校验：如果某个菜单项的href对应的元素不存在，$(target).offset()会返回undefined，scrollTop设置为undefined自然不会有滚动效果——这可能就是你“只有第一个生效”的原因（第一个目标元素存在，后面的可能写错了ID或者元素没渲染）。

修复后的完整代码 #

class SmoothNavScroll {
  constructor() {
    // 精准缓存导航链接元素
    this.navLinks = $('.primary-nav ul li a');
    // 确保DOM加载完成后初始化
    $(document).ready(() => this.init());
  }

  init() {
    // 用箭头函数保留类实例的上下文，同时直接获取遍历的元素
    this.navLinks.each((_, linkElement) => {
      const $link = $(linkElement);
      
      $link.on('click', (e) => {
        // 必须阻止浏览器默认的锚点跳转行为
        e.preventDefault();
        
        const targetSelector = $link.attr('href');
        const $target = $(targetSelector);
        
        // 校验目标元素是否存在，避免无效滚动
        if (!$target.length) {
          console.warn(`找不到目标元素：${targetSelector}`);
          return;
        }

        // 执行平滑滚动，可根据需求调整动画时长
        $('html, body').animate({
          scrollTop: $target.offset().top
        }, 800, 'swing');
      });
    });
  }
}

// 实例化类
new SmoothNavScroll();

关键修复点说明 #

• 阻止默认行为：e.preventDefault()是核心，它能让浏览器放弃默认的锚点跳转，让你的平滑滚动动画正常执行。
• 箭头函数绑定上下文：在.each()和click事件中使用箭头函数，确保回调里的this始终指向类实例，避免上下文混乱。
• 目标元素校验：添加if (!$target.length)的判断，能快速定位到哪个锚点对应的元素不存在，方便调试。
• DOM就绪后初始化：把初始化逻辑放在$(document).ready()里，确保导航元素已经渲染完成后再绑定事件，避免找不到元素的情况。

额外优化建议 #

• 如果你的导航栏是固定在顶部的，可以给滚动位置添加偏移量，避免目标内容被导航栏遮挡：

  scrollTop: $target.offset().top - $('.primary-nav').outerHeight()
  

• 也可以用原生的平滑滚动替代jQuery动画，更高效：

  $target[0].scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
  

如果你的原始代码和我假设的有出入，可以把完整的JS代码贴出来，我再帮你精准排查~

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