javascript 平滑滚动到下一个类元素 jquery

Smooth scrolling to next class element jquery

提问by Sebastian Miecielica

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.

我想使用 html 和 jQuery 在标题之间准备一个平滑的滚动效果。通过按下按钮“next”，用户被移动到最近的下一个标题。

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:

我尝试使用下面的 jQuery 代码，但它不起作用：

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

采纳答案by oqx

Demo

演示

in html change id to class

在 html 中将 id 更改为 class

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

in javascript

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

在 div 之外，因此 jquery 无法访问它。

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

更新

回答by byJeevan

To scroll smoothly to particulate div, use the below code:

要平滑滚动到微粒 div，请使用以下代码：

$("a").on('click', function(e) {
  // prevent default anchor click behavior
  e.preventDefault();
  $('html, body').animate({
    scrollTop: $(this.hash).offset().top
  }, 1000, function() {
    window.location.hash = this.hash;
  });
});

Also,please observed the newly added idfor the title div and hreflocation link in the below example demo.

另外，请在下面的示例演示中观察新添加id的标题 div 和href位置链接。

DEMO HERE

演示在这里

Hope this will solve your problem.

希望这能解决您的问题。

回答by user1063287

Here is a version using:

这是一个使用的版本：

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

and previousand nextlinks with a bit of styling.

和previous和next一些样式的链接。

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

回答by Khalid

This code may help you

此代码可能对您有所帮助

$('html,body').animate({ scrollTop: $(".title").offset().top}, 'slow');