jQuery

Question

美好的一天！我想要一个按钮，当您单击它时，window 将滚动到具有特定 class.

的元素

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

另外，如果可能的话。当它到达最后一个元素时，'current' 应该回到顶部。

请帮助我，在此先感谢。

     $('#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');
           });
         }
      
     });

#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>

<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>

Answer 1

.next() select 仅是直系兄弟，然后检查它是否满足 select 或者如果不匹配则不 return 任何东西。它不会 select 匹配 select 或

的下一个兄弟姐妹

一个简单的解决方案是找到所有下一个匹配 selector 的兄弟姐妹，然后取第一个像

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 - 滚动到具有特定 class 的下一个兄弟

jQuery - scroll to next sibling with specific class

scrolltop