如何实现通过键盘触发jQuery滚动到所选标题的功能

安全阿岳

2026-10-5

实现方案

你需要补充目标元素标识存储、键盘事件监听两部分逻辑，具体修改如下：

第一步：修改导航列表生成逻辑

给每个目标h2元素添加唯一ID，同时把ID存在导航元素的自定义属性里，用于后续定位：

// 预先给所有无ID的h2生成唯一ID（如果你的h2已经有固定ID可跳过这一段）
jQuery(sections).each(function(index) {
  if(!jQuery(this).attr('id')) {
    jQuery(this).attr('id', 'section-' + index);
  }
});

// 原生成列表逻辑修改
if (jQuery(sections).length > 1) {
  jQuery(sections).each(function() {
    // 新增data-target属性存储对应h2的ID
    sectionList += '<li class="scrollControl"><span class="sectionText" tabindex="0" data-target="' + jQuery(this).attr('id') + '">' + jQuery(this).html() + "</span></li>";
  });
  // 此处保留你原有将sectionList插入页面的逻辑
}

第二步：添加键盘+点击事件监听

统一处理点击和回车触发的滚动逻辑：

jQuery(document).on('click keydown', '.sectionText', function(e) {
  // 匹配点击事件、回车键触发（e.key === 'Enter' 写法兼容性也很好，可替代keyCode判断）
  if(e.type === 'click' || (e.type === 'keydown' && (e.keyCode === 13 || e.key === 'Enter'))) {
    const targetId = jQuery(this).data('target');
    const targetElement = jQuery('#' + targetId);
    if(targetElement.length) {
      // 滚动到对应h2位置，可自行调整滚动参数
      targetElement[0].scrollIntoView({
        behavior: 'smooth', // 不需要平滑滚动改为auto即可
        block: 'start' // 对齐到视口顶部，可选center、end等值
      });
      // 无障碍优化可选：滚动后给目标h2加临时焦点
      targetElement.attr('tabindex', '-1').focus();
    }
  }
});