相对于视口/滚动位置获取下一个html锚/选择器？

Question

我有一个多节的HTML页面。

有一个位置：固定->单击时，它应该跳转（滚动）到下一个/最近的位置。

但是，下一部分是相对于视口，而不是按钮（DOM）。

是否有一种简单/内置的方式来定义HTML的“段”，以便它“知道”下一个段在哪里，用户可以

我的工具箱：jquery，javascript，html / css，wordpress。

编辑

自从开始这个问题以来，我实际上是wrote a jquery solution：

enumerates sections => position (as Y)
on event:
    get current offset;
    compare offset against each pair of consequent Y's
        if match:
            jumps to (next-near) selector.
            break;

但是那容易出错，而且不完整。

对于“下一个视口”或“分页”可能有更好的本机解决方案，对吗？

Answer 1

您的prev计算错误，因为您没有处理i为0的情况。它应该类似于以下内容：

function next() {
  console.log(ys);
  var here = $(document).scrollTop(), prev;
  console.log('here:', here);
  for(i=0;i<ys.length -1;i++){ 
    if (i == 0 ) {
      prev = 0;
    } else {
      prev = ys[i -1];
    }   console.log('here:',here,'prev:',prev,'curr:',ys[i],'next:',ys[i+1]);
    if (here>=prev && here<=ys[i]) {
      console.log('found', i, ys[i]);
      return ys[i];
    }
  } 
}