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/

Possible duplicate of [Scroll to bottom of div?](https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) — Jake, Dec 05 '18 at 11:21

score 1 · Answer 1 · answered Dec 05 '18 at 11:26

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>

score 1 · Accepted Answer · answered Dec 05 '18 at 12:00

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>

Have to caveat this - beware as this will actually move the entire document window too - so actually it will solve the issue depending on how you're using the container div. Full details here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView — jonhendrix, Dec 05 '18 at 12:04

jQuery scrollTop in click event not working properly when clicking repeately

2 Answers2