jQuery animate 函数在第二次调用时重置滚动

Question

I have a requirement, where I have to scroll to an element with particular class in a DIV . This should happen on user click.
For this I choose to use jQuery's animate() function. This is working fine.

It works fine for first time, however when user click on button again it resets the scroll position. And works well again on third time....

I know this is happening because the offest of the element to which I need scroll is getting changed after scroll.

Here is my sample code: HTML:

<div class="scroll-div">
        <ul>
            <li>1. The Shawshank Redemption (1994)  9.2</li>
            <li>2. The Godfather (1972)     9.2</li>
            <li>3. The Godfather: Part II (1974)    9.0</li>
            <li>4. The Dark Knight (2008)   8.9</li>
            <li>5. 12 Angry Men (1957)  8.9</li>
            <li>6. Schindler's List (1993)  8.9</li>
            <li>7. Pulp Fiction (1994)  8.9</li>
            <li>8. The Lord of the Rings: The Return of the King (2003)     8.9</li>
            <li>9. The Good, the Bad and the Ugly (1966)    8.8</li>
            <li>10. Fight Club (1999)   8.8</li>
            <li>11. The Lord of the Rings: The Fellowship of the Ring (2001)    8.8</li>
            <li>12. Star Wars: Episode V - The Empire Strikes Back (1980)   8.7</li>
            <li>13. Forrest Gump (1994)     8.7</li>
            <li>14. Inception (2010)    8.7</li>
            <li>15. The Lord of the Rings: The Two Towers (2002)    8.7</li>
            <li>16. One Flew Over the Cuckoo's Nest (1975)  8.7</li>
            <li>17. Goodfellas (1990)   8.7</li>
            <li>18. The Matrix (1999)   8.7</li>
            <li>19. Seven Samurai (1954)    8.6</li>
            <li>20. Star Wars: Episode IV - A New Hope (1977)   8.6</li>
            <li>21. City of God (2002)  8.6</li>
            <li class="seven" style="color:red;">22. Se7en (1995)   8.6</li>
            <li>23. La La Land (2016)   8.6</li>
            <li>24. The Silence of the Lambs (1991)     8.6</li>
            <li>25. It's a Wonderful Life (1946)    8.6</li>
            <li>26. The Usual Suspects (1995)   8.6</li>
            <li>27. Life Is Beautiful (1997)    8.6</li>
            <li>28. Léon: The Professional (1994)   8.5</li>
            <li>29. Spirited Away (2001)    8.5</li>
            <li>30. Saving Private Ryan (1998)  8.5</li>
        </ul>
    </div>

    <input type="button" value="Scroll to Seven" onclick="scrollToSeven()" />

CSS:

.scroll-div{
  height: 100px;
  overflow-y: scroll;
  width: 300px;
  border: 1px solid #dfdfdf;
}

Java Script:

function scrollToSeven(){
  $(".scroll-div").animate({
    scrollTop: $('.seven').offset().top - $('.scroll-div').offset().top
  }, 5);
}

This code is deployed at JSFiddle here you can see the demo.

When you click on Scroll to Seven button for first time it scrolls to the element perfectly. If you click again it resets back.
How can I make it work for multiple clicks? Please help if anyone faced same issue.

Answer 1

Here is the updated version:

function scrollToSeven(){
    $(".scroll-div").animate({
        scrollTop:  $(".scroll-div").scrollTop() + $('.seven').offset().top
    }, 5);
}

https://jsfiddle.net/psjzgx2g/3/