如何为单页网站锚点跳转添加FadeIn/FadeOut淡入淡出切换效果

这个效果完全可以实现，核心思路是拦截默认的锚点跳转行为，先控制当前展示的内容区块执行淡出动画，动画结束后再切换到目标区块执行淡入动画，同时手动同步URL锚点状态即可，具体操作步骤如下：

1. 完善基础HTML结构 #

首先给所有内容区块添加统一类名section-content，默认只给当前需要展示的区块加active标记，其余区块默认隐藏：

<!-- 菜单结构，给链接加统一类名方便绑定事件 -->
<a href="#Part1" class="menu-link">Menu Item 1</a>
<a href="#Part2" class="menu-link">Menu Item 2</a>

<!-- 内容区块结构 -->
<div id="Part1" class="section-content active">
  这里是Part1的内容
</div>
<div id="Part2" class="section-content">
  这里是Part2的内容
</div>

2. 添加CSS过渡样式 #

定义淡入淡出的过渡规则，控制动画的流畅度：

.section-content {
  /* 默认隐藏非激活区块 */
  display: none;
  opacity: 0;
  /* 动画时长可自行调整，单位为秒 */
  transition: opacity 0.4s ease;
}
.section-content.active {
  display: block;
  opacity: 1;
}

3. 添加交互逻辑 #

提供两种实现方案，可根据项目技术栈选择：

原生JavaScript实现（无需引入第三方库） #

// 获取所有菜单链接和内容区块
const menuLinks = document.querySelectorAll('.menu-link');
const sections = document.querySelectorAll('.section-content');

menuLinks.forEach(link => {
  link.addEventListener('click', e => {
    // 拦截默认的锚点跳转行为
    e.preventDefault();
    const targetId = link.getAttribute('href');
    const targetSection = document.querySelector(targetId);
    const currentActive = document.querySelector('.section-content.active');

    // 点击当前激活的菜单不执行重复操作
    if(targetSection === currentActive) return;

    // 执行当前区块淡出
    currentActive.style.opacity = 0;
    // 等待淡出动画结束后切换区块
    setTimeout(() => {
      currentActive.classList.remove('active');
      targetSection.classList.add('active');
      // 手动触发淡入动画
      targetSection.style.opacity = 0;
      setTimeout(() => {
        targetSection.style.opacity = 1;
        // 同步URL锚点，不触发页面跳转
        window.history.pushState(null, null, targetId);
      }, 10);
    // 这里的400毫秒需要和CSS里的transition时长保持一致
    }, 400);
  })
})

jQuery实现（项目已引入jQuery时可使用） #

代码更简洁，自带的fadeIn/fadeOut方法已经封装了动画逻辑：

$('.menu-link').click(function(e) {
  e.preventDefault();
  const targetId = $(this).attr('href');
  if($(targetId).hasClass('active')) return;

  // 先淡出当前激活区块
  $('.section-content.active').fadeOut(400, function() {
    $(this).removeClass('active');
    // 淡出结束后淡入目标区块
    $(targetId).fadeIn(400).addClass('active');
    // 同步URL锚点
    window.history.pushState(null, null, targetId);
  });
})

可选调整说明 #

• 动画快慢可以通过修改CSS的transition时长和JS中对应的超时时间自行调整
• 如果你的需求是页面滚动到对应区块而非切换内容显示隐藏，只需要把内容切换逻辑替换为页面滚动逻辑即可，动画核心逻辑不变

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