jQuery 在单击时滚动到具有相同类的下一个 href

Question

我有三个部分组件，它们都具有相同的类.scrollLink我想单击文本并使其基于锚点滚动到该类的下一个实例

我有一个onclick函数，当我单击它时，它只是保留在当前类中

.HTML：

<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>

.JS：

$('.scrollLink').click(function(e) {
  e.preventDefault();
  var toAnchor = $(this).attr('href');
  $('html,body').animate({
    scrollTop: $(toAnchor).offset().top - 100
  }, 'slow');
  console.log($(toAnchor));
});

单击".scrollLink"，然后转到部分中的下一个锚点 (#(

Answer 1

如果<a href="#panel[n]>在 DOM 中按顺序排列，则可以创建所有.scrollLink的引用集合，并使用它来确定click事件处理程序中的下一个集合。

注意：如果下一个索引的索引超过带有 guard 子句的对象中的元素数，我将使处理程序短路：

  if ( nextIndex == $scrollLinks.length ) { return; }

您可以轻松地将索引设置回0，以便从头开始循环浏览它们。

编辑：你提到去下一个锚点(大概是scrollLink类(;我意识到我不清楚你是否真的需要href属性。页面上是否有未包含在示例 HTML 中的 id="panel1"、id="panel2" 和id="panel3"元素？

var $scrollLinks = $('.scrollLink');
$('.scrollLink').click(function(e) {
  e.preventDefault();
  var nextIndex = $scrollLinks.index(this) + 1,
    toAnchor;
  if (nextIndex == $scrollLinks.length) {
    return;
  }
  toAnchor = $scrollLinks.eq(nextIndex);
  $('html,body').animate({
    scrollTop: toAnchor.offset().top - 100 // toAnchor is already a jQuery object in this example; it needn't be wrapped in an additional `$()` here
  }, 'slow');
  console.log($(toAnchor));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#panel1" class="scrollLink">Test</a>
<a href="#panel2" class="scrollLink">Test</a>
<a href="#panel3" class="scrollLink">Test</a>