jQuery滚动异常：导航栏Logo区域需保留平滑滚动但不添加active类

看起来你已经搞定了导航栏的平滑滚动，现在就差让Logo跳过active类的添加逻辑对吧？核心思路就是在判断哪个导航项要激活的时候，把Logo元素排除在外就行。我给你分两种常见实现方式来讲解：

假设你用jQuery实现的平滑滚动和active类 #

先看一下你可能正在用的代码结构，然后修改active类的判断逻辑：

1. 保留平滑滚动（无需修改） #

你的平滑滚动代码应该是类似这样的，它已经包含了Logo的链接，所以不用调整，确保Logo的href是锚点格式（比如#top）就行：

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  const target = $(this.getAttribute('href'));
  if(target.length) {
    $('html, body').animate({
      scrollTop: target.offset().top
    }, 1000); // 这里的1000是滚动时长，可按需调整
  }
});

2. 修改active类逻辑，排除Logo #

找到你添加active类的滚动监听代码，加入判断跳过Logo元素：

$(window).on('scroll', function() {
  const scrollPos = $(window).scrollTop();
  $('nav a').each(function() {
    const currLink = $(this);
    // 关键：跳过Logo元素，把#na替换成你Logo的实际完整ID
    if(currLink.is('#na')) { 
      return; // 直接跳过当前元素，不执行后续的active类操作
    }
    const refElement = $(currLink.attr('href'));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('nav a').removeClass('active');
      currLink.addClass('active');
    }
  });
});

如果你的Logo是用类名区分的（比如class="navbar-brand"），可以把判断改成：

if(currLink.hasClass('navbar-brand')) return;

如果你用原生JavaScript实现 #

同样的逻辑，在遍历导航链接时跳过Logo：

1. 平滑滚动代码（保留） #

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if(target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

2. 修改active类逻辑 #

window.addEventListener('scroll', function() {
  const scrollPos = window.scrollY;
  const navLinks = document.querySelectorAll('nav a');
  
  navLinks.forEach(link => {
    // 跳过Logo元素，替换成你Logo的实际完整ID
    if(link.id === 'na') return;
    
    const refElement = document.querySelector(link.getAttribute('href'));
    if(refElement && refElement.offsetTop <= scrollPos && refElement.offsetTop + refElement.offsetHeight > scrollPos) {
      navLinks.forEach(l => l.classList.remove('active'));
      link.classList.add('active');
    }
  });
});

注意事项 #

• 一定要把代码里的#na替换成你Logo元素的实际完整ID（你的HTML里是<a id="na...，补全剩下的部分就行），如果是用类名区分的就换成类名判断。
• 检查你的平滑滚动代码有没有排除Logo，如果之前写了类似a[href^="#"]:not(#na)这种选择器，要把:not(#na)去掉，这样Logo才能触发平滑滚动。

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