WordPress中实现按钮点击延迟触发锚点跳转的JS需求

核心思路 #

阻止按钮的默认跳转行为，先触发区块展开，延迟指定毫秒后再执行滚动操作，确保目标区块已完全显示。

原生JavaScript实现方案 #

适用于不想依赖jQuery的场景，将以下代码添加到主题的functions.php（通过wp_add_inline_script）或自定义JS文件中：

document.addEventListener('DOMContentLoaded', () => {
  // 替换为你按钮的实际选择器，比如.btn-toggle-scroll
  const scrollButtons = document.querySelectorAll('.toggle-scroll-btn');
  
  scrollButtons.forEach(btn => {
    btn.addEventListener('click', (e) => {
      // 阻止默认链接跳转
      e.preventDefault();
      
      // 若插件需要手动触发展开，可调用对应方法，比如：
      // btn.dispatchEvent(new Event('click'));
      
      // 延迟执行滚动，x毫秒替换为实际需要的时间（比如500）
      setTimeout(() => {
        const targetSelector = btn.getAttribute('href');
        const targetElement = document.querySelector(targetSelector);
        
        if (targetElement) {
          // 平滑滚动到目标区块
          targetElement.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      }, 500);
    });
  });
});

jQuery实现方案（WordPress常用） #

WordPress默认预装jQuery，以下代码兼容性更好：

jQuery(document).ready(function($) {
  // 替换为你的按钮选择器
  $('.toggle-scroll-btn').on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).attr('href');
    
    // 等待区块展开后执行滚动
    setTimeout(() => {
      // 平滑滚动到目标位置，减20是为了避开顶部导航栏，可调整
      $('html, body').animate({
        scrollTop: $(targetId).offset().top - 20
      }, 600);
    }, 500); // 延迟毫秒数，根据插件展开速度调整
  });
});

优化建议（更可靠的方式） #

如果你的动态区块插件支持展开完成事件，优先用事件监听替代固定延迟，避免延迟时间不合适的问题：

// 假设插件在区块展开后会触发'block:expanded'事件
document.addEventListener('DOMContentLoaded', () => {
  const scrollButtons = document.querySelectorAll('.toggle-scroll-btn');
  
  scrollButtons.forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.preventDefault();
      const targetSelector = btn.getAttribute('href');
      const targetElement = document.querySelector(targetSelector);
      
      // 监听展开完成事件
      const handleExpanded = () => {
        targetElement.scrollIntoView({ behavior: 'smooth' });
        targetElement.removeEventListener('block:expanded', handleExpanded); // 移除监听避免重复触发
      };
      
      targetElement.addEventListener('block:expanded', handleExpanded);
      
      // 触发区块展开（如果需要手动触发）
      // 比如调用插件的展开方法：yourPlugin.toggleBlock(targetElement);
    });
  });
});

注意事项 #

1. 替换代码中的.toggle-scroll-btn为你按钮的实际CSS选择器（类名或ID）
2. 调整延迟时间：根据插件展开区块的动画时长设置，比如动画是300ms，延迟设为400ms足够
3. 如果目标区块有固定导航栏遮挡，可在滚动时减去导航栏高度（如jQuery方案中的-20）

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