CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kishor Prakash
Kishor Prakash

Reputation: 8161

jQuery animate function is resetting scroll when called second time

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.

Upvotes: 2

Views: 977

Answers (1)

Jaap Broeders
Jaap Broeders

Reputation: 66

Here is the updated version:

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

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

Upvotes: 1

Related Questions