Faites défiler suivant DIV en utilisant jQuery

Question

J'ai un modèle de page comme ceci:

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

Lorsque <a class="control-btn" href="#"> </a> est cliquée, je le veux pour faire défiler jusqu'au dernier <div class="container"> (la dernière ligne dans l'extrait de code).

Avec cette jQuery, il défile à la première div.container (vers le haut de l'extrait):

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

Comment puis-je obtenir pour faire défiler la suivantediv.container (le dernier dans mon code Exemple)?

Remarque: Il existe d'autres éléments div.container plus bas - ce n'est pas le «dernier» sur la page.

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