滾動到下一個DIV使用jQuery

Question

我有一個頁面模板是這樣的：

<div class="page-wrapper"> 
    <header class="header-5"> 
     <div class="container"> 
      content 
     </div> 
     <div class="background"></div> 
    </header> 

<section class="content-3"> 
    <div class="row"> 
     <div class="col-sm-8 col-sm-offset-2 text-center"> 
      content 
      <a class="control-btn" href="#"> </a> 
     </div> 
    </div> 
    <div class="container"> 

當點擊<a class="control-btn" href="#"> </a>，我希望它滾動到最後<div class="container">（最後的代碼片段線）。

有了這個jQuery的，它滾動到第一個div.container（代碼片段向頂部）：

$('.control-btn').on('click', function() { 
     $.scrollTo($(".container"), { 
      axis : 'y', 
      duration : 500 
     }); 
     return false; 
    }); 

我怎樣才能得到它滾動到下一個div.container（最後一個在我的代碼例）？

注意：還有其他div.container元素向下 - 這不是頁面上的「最後」元素。

Answer 1

$('.control-btn').on('click', function() { 
    var ele = $(this).closest("section").find(".container"); 
    // this will search within the section 
    $("html, body").animate({ 
     scrollTop: $(ele).offset().top 
    }, 100); 
    return false; 
}); 

DEMO