title: jQuery scroll to top of element in scroll-able div stuck loop
body: <p>I am busy building a page where the Scoring Room of a competition will be able to see live results as the judges score each entry.</p>
  
  <p><a href="https://i.stack.imgur.com/gmoK6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gmoK6.png" alt="enter image description here"></a></p>
  
  <p>Along with this (that checks for updates every 10 seconds), there is a function that checks for the current entry on stage (marked in green), this will scroll the scoring room's block to always display the current entry at the top of the page.</p>
  
  <p>This however creates an endless loop of scrolling up and down the whole time.</p>
  
  <p>The initial scroll works fine, but then because the position of the current item has changed, jQuery scrolls down again so that the item is now at the new offset.</p>
  
  <p><strong>My code currently looks like this:</strong></p>
  
  <p>This calls the function when needed:</p>
  
  <pre><code>$('#entry_'+curr_entry).scrollView();
  </code></pre>
  
  <p>The function that does the actual scrolling:</p>
  
  <pre><code>$.fn.scrollView = function () {
       var item_top = $(this).offset().top;
       var offset = item_top - 100;
  
       //check if sure scrolled more than 10 seconds ago
       var new_time = new Date();
       var old_time = new Date(last_scrolled);
  
       if (new_time - old_time &gt; 10000 || last_scrolled == '') {
           $('.current_section').animate({
           scrollTop: offset
       }, 1000);
   }
  </code></pre>
  
  <p>The <code>new_time</code> and <code>old_time</code> is used so that when the user manually scrolls, this function won't automatically be scrolling for 10 more seconds.
  This part works, so this can be ignored for the question.</p>
  
  <p>The initial size of the scroll-able element is quite small:
  <a href="https://i.stack.imgur.com/jNrbV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jNrbV.png" alt="enter image description here"></a></p>
  
  <p>I have tried using <code>.position()</code> instead of <code>.offset()</code> but I get the same results.</p>
  
  <p>I also tried to get the current scroll position of the containing div with</p>
  
  <pre><code>$('.current_section').animate.scrollTop();
  </code></pre>
  
  <p>and then using the current position of the current entry on stage to calculate the correct scroll point, but to no avail.</p>
  
  <p>Ideally I would like for the scrolling item to be at position 100 form the top of the containing div when automatically scrolling.</p>
  
  <p>The idea was that this be on a TV or big monitor at the event and would only be used to monitor the scores to check that everything is in order, that is why the automatic scrolling is a must.</p>
  
  <p>Please let me know if there is something simple that I missed.</p>
  
  <p>Thanks in advance.</p>