Smooth scrolling to next class element jquery

Question

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.

Simplifying my code looks like that:

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

I tried to use the jQuery code below, but it doesn't work:

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

Solution

Demo

in html change id to class

<div class="title">
    <a href="#" class="next">next</a>
    <h2>title5</h2>
</div>

in javascript

$(".next").click(function() {
   $('html,body').animate({ scrollTop:$(this).parent().next().offset().top}, 'slow');});

---Update

you had a problem in your update which is that you used the

outside the div so the jquery can't get to it.

it should be like this

<div class="title">
<a href="#" class="next">next</a>
<h2>title1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris augue, molestie sit amet eros ac, tempus euismod justo. Donec faucibus sapien et lacus blandit sodales vitae vitae orci. Pellentesque aliquam suscipit purus. Fusce quis urna non arcu congue vulputate quis quis nunc. Praesent erat libero, porta eget lorem vitae, pretium sollicitudin felis. Pellentesque ultrices cursus lectus vel sodales. Fusce sodales ac dolor vel pretium. Nullam suscipit euismod nisi eu ullamcorper. Mauris consectetur urna accumsan nulla convallis, nec sagittis est faucibus. Nulla quis consectetur velit.

update

Comments

[Sebastian Miecielica]

thanks, but I need something, that work with 10 or more title elements. Your code works only when I have one link.

[Khalid]

foreach link, you define a function like this $("#link1").click(function(){ // code that scrolls }); and define other functions for link2 link3 ...

[Sebastian Miecielica]

I know that I can do this in this way, but it's too much code, there must be shorter version. I found some code here link but it doesn't work on my webpage.

[Sebastian Miecielica]

is there any option to do that without adding 'id' for next title?

[Sebastian Miecielica]

It works! Do you know how change it into "previous button"? Just by changing next() into prev()?

[byJeevan]

Kindly post separate question for the same. Thanks

[oqx]

Yes it could work by just changing it to prev, but i recommend that you change the class name from Next into something else just for sack of consistency

[Sebastian Miecielica]

I've updated your jsFiddle - updated - file with some text and I noticed that it doesn't work properly now. Is there any option to fix it?

[oqx]

first you need to update you question with the issue so i can answer it and people won't have to go through comment, second it is really rude to unmark question because you want a new thing, you'll find the answer in the update in answer.