jQuery scrollTop in click event not working properly when clicking repeately

Question

In my HTML, I have a <div> called lastText at the bottom of another <div> . I need to click a button and scroll to the lastText . When I click on the button, it scrolls to the <div> but when I click it again it scrolls somewhere between top and bottom. When I scroll to somewhere in middle, and click on the button it doesn't scroll to the lastText . So basically scrolling is only working properly when I start to scroll from the very top. I need to scroll to lastText when click on the button from anywhere in the <div> . How can I solve this?

Here is the code:

http://jsfiddle.net/aQpPc/202/

Answer 1

What you can do is to use the function like this scrollTop: $('WhereYouWantToScroll').offset().top So your example can easily be done with an if switching between top and bottom of the div

  var isTop = true; function test() { if(isTop){ $('#scrollTest').animate({ scrollTop: $('#lastText').offset().top }, 1000); } else{ $('#scrollTest').animate({ scrollTop: $('#scrollTest').offset().top + -10 }, 1000); } isTop = !isTop; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scrollTest" style="height : 100px; overflow : auto;"> 1 - Long Div Scrolling text <br/> 2 - Long Div Scrolling text <br/> 3 - Long Div Scrolling text <br/> 4 - Long Div Scrolling text <br/> 5 - Long Div Scrolling text <br/> 6 - Long Div Scrolling text <br/> 7 - Long Div Scrolling text <br/> 8 - Long Div Scrolling text <br/> 9 - Long Div Scrolling text <br/> 10 - Long Div Scrolling text <br/> 11 - Long Div Scrolling text <br/> 12 - Long Div Scrolling text <br/> 13 - Long Div Scrolling text <br/> 14 - Long Div Scrolling text <br/> 15 - Long Div Scrolling text <br/> 16 - Long Div Scrolling text <br/> 17 - Long Div Scrolling text <br/> <div id="lastText">last</div> </div> <button type="button" onclick="test()">scroll down</button> 

Answer 2

Pure Javascript solution:

 function test() { let el = document.getElementById("lastText"); el.scrollIntoView({behavior: "smooth"}); } 

 <div id="scrollTest" style="height : 100px; overflow : auto;"> 1 - Long Div Scrolling text <br/> 2 - Long Div Scrolling text <br/> 3 - Long Div Scrolling text <br/> 4 - Long Div Scrolling text <br/> 5 - Long Div Scrolling text <br/> 6 - Long Div Scrolling text <br/> 7 - Long Div Scrolling text <br/> 8 - Long Div Scrolling text <br/> 9 - Long Div Scrolling text <br/> 10 - Long Div Scrolling text <br/> 11 - Long Div Scrolling text <br/> 12 - Long Div Scrolling text <br/> 13 - Long Div Scrolling text <br/> 14 - Long Div Scrolling text <br/> 15 - Long Div Scrolling text <br/> 16 - Long Div Scrolling text <br/> 17 - Long Div Scrolling text <br/> <div id="lastText">last</div> </div> <button type="button" onclick="test()">scroll down</button>