Question

我想使用html和jQuery在标题之间准备一个平滑的scrooling效果。按下按钮＆＃34; next＆＃34;用户被移动到最近的下一个标题。

简化我的代码如下：

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

Answer 1

Demo

在html中将id更改为类

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

---更新

你的更新中遇到了一个问题，就是你在div之外使用了

，所以jquery无法访问它。

应该是这样的

<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

此代码可以帮助您

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

Answer 3

要平滑滚动到颗粒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;
  });
});

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

<强> DEMO HERE

希望这能解决您的问题。

Answer 4

以下是使用的版本：

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

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

4 个答案: