0

based on this thread I added a scroll up to next div, like this:

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

So this scrolls up and down very nicely.

The problem though, is that when the user scrolls, the script doesn't notice it. That is, the user scrolls from div1 to div4, when the user click on my "next"-button, he or she gets scrolled to div2. How can I solve this?

I checked into this but I cannot combine it with the above. There must be an easier way, right?

Any help much appreciated!

Skt
  • 45
  • 5

1 Answers1

0

Oh... I think I might have solved it myself like 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;  
});

The above is based on this.

The only problem here is that when parts of a div is scrolled into view, the next and previous buttons sometimes behave strange. For example, when being between div2 and div3 and div 3 is most visible, the previous click can take the user back to div1, which feels not so logical. Can we adjust this somehow? I suppose I would have to do something with the offset but I am unsure.

Skt
  • 45
  • 5