title: Misplaced Scroll Bar When scrollTo Called
body: <p>I am using the below function to scroll to a Div inside a Div. </p>
  
  <p>It works but the car stays at last position so if the user scrolls it flashes to the original position. To clarify the scroll bar is actually at the top of the div but the user sees to bottom element but when user scrolls up he or she doesn't get the expected result of moving to the element right above the last they get bumped to the top. </p>
  
  <pre><code> jQuery.fn.scrollTo = function (elem, speed) {
              $(this).animate({
                  scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
              }, speed == undefined ? 1000 : speed);
              return this;
          };
  
  onclick="$('#usermessageDiv').scrollTo('.last_usermessage', 2000);"
  
   $('.small-chat-box .content').slimScroll({
              height: '234px',
              railOpacity: 0.4
          });
    &lt;div id="usermessageDiv" class="content" style="overflow: scroll; width: auto; height: 234px;"&gt;
  </code></pre>
  
  <p>The image below shows where the bar is vs the 2nd lower red arrow where the scroll bar should be in regards to the view shown. </p>
  
  <p><a href="https://i.stack.imgur.com/2pGhB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2pGhB.png" alt="enter image description here"></a></p>