<div class="article-content">

    <div class="title">

        <a href="#" id="next">next</a>

        <h2>Title1</h2>

    </div>

    some text goes here

    <div class="title">

        <a href="#" id="next">next</a>
        <h2>Title2</h2>

    </div>

    <div class="title">

        <a href="#" id="next">next</a>
       <h2>Title3</h2>

    </div>

</div>

$("#next").click(function() {

      var next;

      next = $(this).parent().next().find(".title");
       $('html,body').animate({ scrollTop: next.offset().top
            }, 1000);

});