js右侧a到z索引

<div id="container">
  <ul id="list">
    <!-- 数据项 -->
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <!-- 更多数据项 -->
  </ul>
  <div id="index">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  </div>
</div>

#container {
  position: relative;
}

#index {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#index span {
  cursor: pointer;
  margin: 2px 0;
}

document.addEventListener('DOMContentLoaded', function() {
  const index = document.getElementById('index');
  const list = document.getElementById('list');
  const items = list.getElementsByTagName('li');

  index.addEventListener('click', function(e) {
    if (e.target.tagName === 'SPAN') {
      const letter = e.target.textContent;
      scrollToLetter(letter);
    }
  });

  function scrollToLetter(letter) {
    for (let i = 0; i < items.length; i++) {
      if (items[i].textContent.startsWith(letter)) {
        items[i].scrollIntoView({ behavior: 'smooth' });
        break;
      }
    }
  }

  // 生成索引
  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  let indexHTML = '';
  letters.forEach(letter => {
    indexHTML += `<span>${letter}</span>`;
  });
  index.innerHTML = indexHTML;
});