我有三个部分的组件,它们都具有相同的类.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并转到部分中的下一个锚点(#)

最佳答案

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

注意:如果下一个索引超过使用guard clause的对象中元素的数量,我将使处理程序短路:

  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>

10-05 20:57
查看更多