CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jason Lin
Jason Lin

Reputation: 2007

jQuery offset().top slightly off every other time

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

Upvotes: 3

Views: 3271

Answers (4)

Prusprus
Prusprus

Reputation: 8065

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/

Upvotes: 5

Duncan Thacker
Duncan Thacker

Reputation: 5188

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/

Upvotes: 0

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

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>

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 531

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

see the difference

Upvotes: 0

Related Questions