jQuery offset().top slightly off every other time

Question

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.net/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);

Prusprus · Accepted Answer · 2015-06-16T19:11:19.673

5

Try this for your offset calculation:

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

Update jsfiddle: https://jsfiddle.net/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.net/rLeLogx0/23/

edited Jun 16 '15 at 19:11

answered Jun 16 '15 at 19:06

Prusprus

7,987
9
42
57

That's perfect! Thanks! – Jason Lin Jun 16 '15 at 19:11

Nanang Mahdaen El-Agung · Answer 2 · 2015-06-16T19:03:04.610

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.com/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>

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

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

see the difference

edited May 23 '17 at 10:27

Community

1
1

answered Jun 16 '15 at 19:00

Master Yoda

531
8
22

I tried replacing offset with position, but it doesn't help. https://jsfiddle.net/rLeLogx0/17/. Perhaps I need to change more though. – Jason Lin Jun 16 '15 at 19:02
Turns out I had to use position. @Prusprus provided the exact line above with the solution. – Jason Lin Jun 16 '15 at 19:11

score 0 · Answer 4 · answered Jun 16 '15 at 19:10

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.net/mvs6Ltgu/

jQuery offset().top slightly off every other time

4 Answers4