title: Smooth scrolling to next class element jquery
body: <p>I want to prepare a smooth scrooling effect between titles using html and jQuery. By pressing button "next" the user is moved to the closest next title.</p>
  
  <p>Simplifying my code looks like that:</p>
  
  <pre><code>&lt;div class="article-content"&gt;
      &lt;div class="title"&gt;
          &lt;a href="#" id="next"&gt;next&lt;/a&gt;
          &lt;h2&gt;Title1&lt;/h2&gt;
      &lt;/div&gt;        
         some text goes here        
      &lt;div class="title"&gt;
          &lt;a href="#" id="next"&gt;next&lt;/a&gt;
          &lt;h2&gt;Title2&lt;/h2&gt;
      &lt;/div&gt;      
      &lt;div class="title"&gt;
          &lt;a href="#" id="next"&gt;next&lt;/a&gt;
         &lt;h2&gt;Title3&lt;/h2&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to use the jQuery code below, but it doesn't work:</p>
  
  <pre><code>$("#next").click(function() {
        var next;
        next = $(this).parent().next().find(".title");
         $('html,body').animate({ scrollTop: next.offset().top
              }, 1000);
  });
  </code></pre>