Question

美好的一天！我想要一个按钮，当你点击它时，窗口将滚动到具有特定类的元素。

我有这个片段。它滚动，但是当应该跳过下一个兄弟时，它不会滚动。

另外，如果可能的话。当它到达最后一个元素时，＆＃39;当前＆＃39;应该回到顶端。

请提前帮助我。

＆＃13;

     $('#nextBtn').on('click', function(e) {
       e.preventDefault();
     
       if ($('#nextBtn') && $('.current').next('li.scroll').length > 0) {
           
           var $next = $('.current').next('.scroll');
           var top = $next.offset().top;
           
           $('.current').removeClass('current');
         
           $('body').animate({
             scrollTop: top     
           }, function () {
                  $next.addClass('current');
           });
         }
      
     });

＆＃13;

#nextBtn {position:fixed;top:0;right:50px;text-align:right;}
li{color:white;background: #333;margin:10px 0;height:500px;list-style:none;padding:0}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="nextBtn">NEXT</button>

<li class="scroll current">Scroll here!</li>
<li class="scroll">Scroll here!</li>
<li class="scroll">Scroll here!</li>
<li class="not-scroll">DO NOT scroll here!</li>
<li class="not-scroll">DO NOT scroll here!</li>
<li class="scroll">Scroll here!</li>
<li class="scroll last">Scroll here!</li>

＆＃13;

Answer 1

.next()仅选择直接兄弟，然后检查它是否满足选择器，如果不匹配则不返回任何内容。它不会选择与选择器匹配的下一个兄弟。

一个简单的解决方案是找到与选择器匹配的所有下一个兄弟姐妹，然后像

那样选择第一个兄弟姐妹

var $next = $('.current').nextAll('.scroll').first();

$('#nextBtn').on('click', function(e) {
  e.preventDefault();
  var $current = $('.current'),
    $next = $current.nextAll('.scroll').first();
  if (!$next.length) {
    $next = $('.scroll').first();
  }

  if ($next.length) {


    var $next = $next.first();
    var top = $next.offset().top;

    $current.removeClass('current');

    $('body').animate({
      scrollTop: top
    }, function() {
      $next.addClass('current');
    });
  }

});

#nextBtn {
  position: fixed;
  top: 0;
  right: 50px;
  text-align: right;
}
li {
  color: white;
  background: #333;
  margin: 10px 0;
  height: 500px;
  list-style: none;
  padding: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="nextBtn">NEXT</button>

<ul>
  <li class="scroll current">Scroll here 1!</li>
  <li class="scroll">Scroll here 2!</li>
  <li class="scroll">Scroll here 3!</li>
  <li class="not-scroll">DO NOT scroll here!</li>
  <li class="not-scroll">DO NOT scroll here!</li>
  <li class="scroll">Scroll here 4!</li>
  <li class="scroll last">Scroll here 5!</li>
</ul>

jQuery - 滚动到具有特定类

1 个答案: