javascript - jQuery函数使用键盘滚动页面到选定的标题

Question

我有这段代码可以创建一个h2包含可点击链接的页面中所有元素的列表，但它不适用于键盘。

我希望能够选择this代码中引用的内容并通过按键盘上的 enter 向下滚动到它。

有谁知道我该怎么做？干杯

if (jQuery(sections).length > 1) {
  jQuery(sections).each(function() {
    sectionList += '<li class="scrollControl"><span class="sectionText" tabindex="0">' + jQuery(this).html() + "</span></li>";
  });

标签： javascripthtmljquery

Answer 1

你是这个意思

在这里，我还允许在 LI 上使用制表符和输入

const $sections = $("h1");
$("#nav").html(
  $sections.map(function() {
    return `<li class="scrollControl"><span class="sectionText" tabindex="0">${$(this).html()}</span></li>`
  }).get().join("")
);
$("#nav").on("click", "li", function() {
  $sections.eq($(this).index())[0].scrollIntoView()
})
$(document).on('keydown', function(e) {
  if (e.originalEvent.code === "Enter") {
    const tgt = e.target.closest("li")
    if (tgt && tgt.classList.contains("scrollControl" )) {
      $sections.eq($(tgt).index())[0].scrollIntoView()
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav"></ul>
<h1>Section 1</h1>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<h1>Section 2</h1>