如何实现点击按钮依次滚动定位到页面中所有mark标签的高亮内容

核心逻辑 #

• 用全局索引变量记录当前定位的高亮元素位置，避免每次点击丢失上次定位进度
• 每次点击next按钮索引自增，超过高亮元素总数时重置为0实现循环跳转
• 取当前索引对应的mark元素计算偏移量，执行滚动操作

完整修正代码 #

// 全局索引，记录当前定位到第几个高亮元素，初始为-1表示未定位过
let currentHighlightIndex = -1;
// 绑定按钮点击事件
$('#btnNext').click(test);
function test() {
  // 获取所有高亮mark标签并转成数组
  const pickHighlights = document.querySelectorAll('mark');
  const pHtest = Array.from(pickHighlights);
  // 没有高亮内容直接返回
  if (pHtest.length === 0) return;
  // 索引自增，超过总数时重置为0，循环跳转
  currentHighlightIndex = (currentHighlightIndex + 1) % pHtest.length;
  // 获取当前要定位的mark元素
  const currentMark = pHtest[currentHighlightIndex];
  // 可选：给当前定位的高亮加特殊样式区分，移除其他高亮的特殊样式
  pHtest.forEach(mark => mark.classList.remove('current-highlight'));
  currentMark.classList.add('current-highlight');
  // --------------滚动逻辑--------------
  // 场景1：高亮内容在.timeline-compendium__content可滚动容器内
  const scrollContainer = document.querySelector('.timeline-compendium__content');
  // 计算元素相对于容器的偏移，减20是预留顶部间距避免贴顶，可自行调整
  const scrollTop = currentMark.offsetTop - scrollContainer.offsetTop - 20;
  scrollContainer.scrollTo({
    top: scrollTop,
    behavior: 'smooth' // 平滑滚动效果，不需要可以删掉
  });
  // 场景2：全局页面滚动的话替换上面的滚动逻辑为下面这段
  // const scrollTop = currentMark.offsetTop - 20; // 20为顶部预留间距，有固定导航的话改成导航高度
  // window.scrollTo({
  //   top: scrollTop,
  //   behavior: 'smooth'
  // });
}

补充说明 #

• 如果需要添加上一个（prev）按钮，逻辑为索引自减，小于0时赋值为pHtest.length - 1即可
• 搜索内容更新、mark标签重新渲染时，需要手动把currentHighlightIndex重置为-1，避免索引越界
• 可选添加自定义样式区分当前定位的高亮，示例样式如下：

.current-highlight {
  background: #ff8c00;
  color: #fff;
}

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