WordPress中Swiper.js导航在FireFox循环时页面跳转问题

核心原因 #

FireFox对锚点默认行为的处理机制和其他浏览器存在差异，再加上WordPress环境里插件、主题的JS脚本干扰，导致Swiper通过导航按钮触发首尾循环切换时，意外触发了页面锚点跳转至顶部的行为。纯HTML环境无额外脚本干扰，所以运行正常。

具体解决步骤 #

• 修正导航按钮的标签类型或阻止默认行为
  如果你的导航按钮用的是<a href="#">标签，FireFox会默认触发锚点跳转。直接把<a>换成<button>标签，或者给按钮绑定点击事件阻止默认行为：

  document.querySelectorAll('.swiper-button-prev, .swiper-button-next').forEach(btn => {
    btn.addEventListener('click', e => e.preventDefault());
  });
  

• 调整Swiper初始化配置
  优化循环相关配置，避免FireFox下DOM重绘导致的滚动偏移：

  const swiper = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
      clickable: true,
      bulletElement: 'span'
    },
    // 新增配置修复滚动问题
    preventInteractionOnTransition: true,
    loopAdditionalSlides: 1,
    // 若不需要触摸滑动，可禁用避免冲突
    // allowTouchMove: false
  });
  

• 排查WordPress插件/主题冲突
  因为问题仅出现在WP环境，逐一禁用插件（先从Modernizr、WooCommerce开始），测试是否恢复正常。同时检查主题的全局JS脚本，看是否有对<a>标签的统一默认行为处理，干扰了Swiper的按钮事件。

• 强制恢复滚动位置（兜底方案）
  如果以上方法无效，在Swiper切换前后记录并恢复滚动位置：

  let currentScroll = 0;
  swiper.on('transitionStart', () => {
    currentScroll = window.scrollY;
  });
  swiper.on('transitionEnd', function() {
    // 仅在循环切换到首尾时恢复位置
    if (this.isBeginning || this.isEnd) {
      window.scrollTo(0, currentScroll);
    }
  });
  

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