jquery - 滚动到下一个/上一个 div 不适用于手动滚动

标签 jquery html css

目前,我正在尝试使用 jQuery 滚动构建一个站点。我的代码有效,但我的问题是使用我的代码,一旦到达底部并手动向上滚动,向下按钮就会停止工作。即使在手动滚动到顶部之后,如何让向下按钮起作用?

我当前的 html 代码:

<div class="down">next post</div>
<div class="container">
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
     <div class="posts"></div>
</div>

和我的 jquery 代码:

var $currentElement = $('.posts').first();
$('.down').click(function() {
    var $nextElement = $currentElement.nextAll('.posts');
    if($nextElement.length) {
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 900, 'swing')
    }
    return false;
});

最佳答案

使用这个 fiddle ...

var currentElement = $('.posts').first();
$('.down').click(function() {
  var nextElement = currentElement.nextAll('.posts');
  console.log(nextElement);
  if(nextElement.length) {
      currentElement = nextElement;
      $('html, body').stop(true).animate({
          scrollTop: nextElement.offset().top
      }, 900, 'swing');
  }
  return false;
}); 

关于jquery - 滚动到下一个/上一个 div 不适用于手动滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48595904/

相关文章:

jquery - 如何使用 JQuery 的事件处理程序使用带有提交按钮的文本框?

javascript - 查找并删除文本,然后使用 jquery 或 javascript 插入图像

javascript - 使用用户输入的文本字段值更新数组

Javascript 幻灯片在一次迭代中不显示图像

HTML 元素在 Mac 上正确定位但在 PC 上不正确

javascript - 如何使用 jQuery 淡入列表中的下一张图像?

javascript - 解析错误 400(错误请求){代码 : 201, 消息: "missing user password"}

javascript - 使用无法在页面上工作的书签注入(inject) jQuery

javascript - 动态创建新元素

html - 定位:after-pseudo behind text in a link