使用jQuery实现平滑滚动到下一个class元素

Question

使用jQuery实现平滑滚动到下一个class元素

3

我希望使用html和jQuery实现标题之间的平滑滚动效果。通过按下“下一个”按钮，用户将移动到最接近的下一个标题。

简化后的代码如下：

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

我尝试使用下面的jQuery代码，但它无法工作：

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

- Sebastian Miecielica

1

在同一页中不能有多个具有相同id的元素。您应该使用data-id或class来区分您的“下一个”链接。 - Austin Mullins

可能会出现冲突。尝试为这些按钮分配类，而不是使用ID。 - JoJo

哦，是的 :) 我已经为链接添加了类，但它仍然不起作用 :/ - Sebastian Miecielica

4个回答

0

这段代码可能会对你有所帮助

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

- Khalid

谢谢，但我需要的是能够处理10个或更多标题元素的代码。你的代码只适用于一个链接的情况。 - Sebastian Miecielica

对于每个链接，您可以像这样定义一个函数：

$("#link1").click(function(){ 
  // 滚动代码 
});

并且为链接2、链接3等定义其他函数。 - Khalid

我知道我可以用这种方式做到这一点，但是代码太多了，肯定有更短的版本。我在这里找到了一些代码[链接]（http://forum.jquery.com/topic/find-next-div-with-a-certain-class-and-scroll-to），但它在我的网页上不起作用。 - Sebastian Miecielica

0

为了平滑滚动到特定的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;
  });
});

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

在此处查看演示

希望这能解决您的问题。

- byJeevan

有没有不添加“id”即可实现下一个标题的选项？ - Sebastian Miecielica

0

这里是一个使用的版本：

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

带有一些样式的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>

- user1063287

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- oqx · Accepted Answer

演示

在HTML中将id改为class

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

在JavaScript中

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

---更新

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