滚动到上一个div

问题描述

基于this线程，我向下一个div添加了滚动条，如下所示：

var f = jQuery('.p');
var nxt = f;
jQuery(".next").click(function() {

  if (nxt.next('.scroller').length > 0) {
    nxt = nxt.next('.scroller');
  } else {
    nxt = f;
  }
  jQuery('html,body').animate({
      scrollTop: nxt.offset().top
    },'slow');
});
var f = jQuery('.p');
var prev = f;
jQuery(".previous").click(function() {

  if (prev.prev('.scroller').length > 0) {
    prev = prev.prev('.scroller');
  } else {
    prev = f;
  }
  jQuery('html,body').animate({
      scrollTop: prev.offset().top
    },'slow');
});

因此，它可以很好地上下滚动。

但是问题是，当用户滚动时，脚本不会注意到它。也就是说，用户从div1滚动到div4，当用户单击我的“下一个”按钮时，他或她将滚动到div2。我该如何解决？

我签入了this，但无法将其与上述内容结合使用。必须有一种更简单的方法，对吧？

任何帮助，不胜感激！

解决方法

哦...我想我自己可能已经解决了：

var jQuerycurrentElement = jQuery(".scroller").first();

jQuery(".next").click(function () {
    var jQuerynextElement = jQuerycurrentElement.next(".scroller");
    // Check if next element actually exists
    if(jQuerynextElement.length) {
        // If yes,update:
        // 1. $currentElement
        // 2. Scroll position
       jQuerycurrentElement = jQuerynextElement;
        jQuery('html,body').stop(true).animate({
            scrollTop: jQuerynextElement.offset().top
        },100);
    }
    return false;
});

jQuery(".previous").click(function () {
    var jQueryprevElement = jQuerycurrentElement.prev(".scroller");
    // Check if previous element actually exists
    if(jQueryprevElement.length) {
        // If yes,update:
        // 1. $currentElement
        // 2. Scroll position
        jQuerycurrentElement = jQueryprevElement;
        jQuery('html,body').stop(true).animate({
            scrollTop: jQueryprevElement.offset().top
        },100);
    }
    return false;  
});

以上内容基于this。

这里唯一的问题是，当将div的一部分滚动到视图中时，下一个和上一个按钮有时会表现为奇怪。例如，当在div2和div3之间且最容易看到div 3时，上一次单击可以将用户带回到div1，这并不那么合逻辑。我们可以以某种方式进行调整吗？我想我必须对偏移量做些什么，但不确定。