I'm trying to make the inside of a parent div scroll to the next child div on a set interval. However, the scroll only works half the time and I can't figure out why. It should scroll through all 8 children, but only goes through about half.

In this jsfiddle I made, the offset is just 1px off every other time when it should be ~250px off. In my actual code its 0px off, when it should be ~250px off.

/

Here's the JS:

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;

    //ISSUE: outputs the "same" value every other time
    console.log(target.offset().top);

    parent.animate({
        scrollTop: offset
    }, 200);
    index = (index+1) % children.length;
}, 1000);

I'm trying to make the inside of a parent div scroll to the next child div on a set interval. However, the scroll only works half the time and I can't figure out why. It should scroll through all 8 children, but only goes through about half.

In this jsfiddle I made, the offset is just 1px off every other time when it should be ~250px off. In my actual code its 0px off, when it should be ~250px off.

https://jsfiddle/rLeLogx0/3/

Here's the JS:

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;

    //ISSUE: outputs the "same" value every other time
    console.log(target.offset().top);

    parent.animate({
        scrollTop: offset
    }, 200);
    index = (index+1) % children.length;
}, 1000);

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 16, 2015 at 18:41 Jason LinJason Lin 2,01733 gold badges1717 silver badges1818 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Try this for your offset calculation:

var offset = target.position().top + parent.scrollTop();

Update jsfiddle: https://jsfiddle/rLeLogx0/21/

UPDATE:

If you truly want your offset variable to contain the offset, you can increment the value within the scrollTop parameter in your .animate()

var target = children.eq(index);

[...]

parent.animate({
    scrollTop: '+='+offset
}, 200);

See jsfiddle: https://jsfiddle/rLeLogx0/23/

try running position().top instead of offset.top()

see the difference

Something like this?

$(document).ready(function() {
  var child = $('.parent .child'), index = 0;

  var scrollIt = function() {
    var top = child.eq(index).offset().top;
    
    index++;

    if (index >= child.length) {
      index = 0;
    }

    setTimeout(function() {
      scrollIt();
    }, 1000);

    $('html, body').animate({ scrollTop: top });
  }
  
  scrollIt();
});

.parent {
  display: block;
  width: 100%;
}

.child {
  display: block;
  width: 100%;
  height: 96px;
  background: #ccc;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>  
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

Your problem is that offset is giving you the distance from the top of the parent to the next target, because the child top value is updating all the time, but setting scrollTop is an absolute distance, not an offset. Here's the code you should use:

//scroll to 2nd one first
var index = 1;

setInterval(function(){
    var parent = $('.parent');
    var children = parent.find('.child');
    var target = children.eq(index);   
    var offset = target.offset().top - $('.parent').offset().top;

    //outputs the same value every other time
    console.log(target.offset().top);

    var newScroll = parent.scrollTop() + offset;

    parent.animate({
        scrollTop: newScroll
    }, 200);
    index = (index+1) % children.length;
}, 1000);

JsFiddle: https://jsfiddle/mvs6Ltgu/