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);
});

Answer 1

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

Answer 2

Here is a version using:

$(document).on("click", ".clicker", function() { 
// do things
}); 

and previous and next links with a bit of styling.

$(document).on("click", ".clicker", function(e) {

  e.preventDefault();

  var $this = $(this);

  if ($this.hasClass("next")) {
    $('html, body').animate({
      'scrollTop': $(this).closest(".container").next().offset().top
    }, 'slow');

  } else if ($this.hasClass("previous")) {
    $('html, body').animate({
      'scrollTop': $(this).closest(".container").prev().offset().top
    }, 'slow');
  }

});

.container {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.container:first-child {
  border-top: 1px solid #ccc;
}

.container a {
  font-weight: normal;
  font-family: arial;
  font-size: 14px;
}

.links {
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="section">
    <p>01. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>02. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>03. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>04. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>05. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>06. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>07. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>08. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>09. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>10. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>11. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>12. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>13. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>14. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a> | <a href="#" class="clicker next"> next </a>
    </div>
  </div>
</div>

<div class="container">
  <div class="section">
    <p>15. lorem ipsum </p>
    <div class="links">
      <a href="#" class="clicker previous"> previous </a>
    </div>
  </div>
</div>