时间戳

首页 > 解决方案 > 使用 js 的下一个和上一个锚点

javascript - 使用 js 的下一个和上一个锚点

问题描述

我有一个页面，其中显示了所有问题的答案，并且不时更新答案。我想要一个NEXT和PREVIOUS按钮，可以滚动到下一个或上一个新/更新的答案。

所有新的/更新的答案都有一个标签元素id= new_@i，其中i是索引，并且class= "new"：

<label id="new_@i" style="display:none" class="new">new_@i</label>

然后，我创建了一个按钮：

<label class="button" id="nextnew">NEXT</label>

并尝试实现 JS 部分，但不知何故窗口没有滚动到目标：

$('#nextnew').click(function(e) {
        var selected = $(".new.currentSelected");
        var anchors = $(".new");

        var pos = anchors.index(selected);
        var next = anchors.get(pos+1);
        var prev = anchors.get(pos-1);

        target = $(next);

        $(selected).removeClass("currentSelected");
        $(next).addClass("currentSelected");

        if (target.offset()) {
            $('html, body').animate({scrollTop: target.offset().top + 'px'}, 600);
        }
        e.preventDefault();
    });

我已经仔细检查了 JS 部分中的变量，它们看起来很好。任何想法，有什么问题？

标签： javascriptjqueryhtmlcss

解决方案

您的代码正常工作

这是一个片段来说明这一点。如果您想更改某些内容，请在评论中写下，我将编辑我的答案。

$('#nextnew').click(function(e) {
  var selected = $(".new.currentSelected");
  var anchors = $(".new");

  var pos = anchors.index(selected);
  var next = anchors.get(pos + 1);
  var prev = anchors.get(pos - 1);

  target = $(next);

  $(selected).removeClass("currentSelected");
  $(next).addClass("currentSelected");

  if (target.offset()) {
    $('html, body').animate({
      scrollTop: target.offset().top + 'px'
    }, 600);
  }
  e.preventDefault();
});
.new {
  margin: 10px 0;
  padding: 5px 8px;
  background: #EEE;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="button" id="nextnew">NEXT</label>

<label id="new_@1" class="new">new_@1</label>
<label id="new_@2" class="new">new_@2</label>
<label id="new_@3" class="new">new_@3</label>
<label id="new_@4" class="new">new_@4</label>
<label id="new_@5" class="new">new_@5</label>
<label id="new_@6" class="new">new_@6</label>
<label id="new_@7" class="new">new_@7</label>
<label id="new_@8" class="new">new_@8</label>
<label id="new_@9" class="new">new_@9</label>
<label id="new_@10" class="new">new_@10</label>
<label id="new_@11" class="new">new_@11</label>
<label id="new_@12" class="new">new_@12</label>
<label id="new_@13" class="new">new_@13</label>
<label id="new_@14" class="new">new_@14</label>
<label id="new_@15" class="new">new_@15</label>
<label id="new_@16" class="new">new_@16</label>
<label id="new_@17" class="new">new_@17</label>
<label id="new_@18" class="new">new_@18</label>
<label id="new_@19" class="new">new_@19</label>
<label id="new_@20" class="new">new_@20</label>
<label id="new_@21" class="new">new_@21</label>

推荐阅读