In general, I scroll inside the table, the code I quote from below, why when I click for the first time, everything is OK, it scrolls to where it’s necessary and it’s logical that when I click again, I’ll essentially not have to scroll because I am already at the right positions. However, when I click through again, a scroll occurs in some random places.

$('#sc-wrap > .sc-controller').each( function(i, elem){ $(elem).attr('data-target', 'sc-position' + (i + 1) ); }); $('.sc-controller').click( function() { var target = $(this).attr('data-target'); var scrollTop = $('#'+target).offset().top; $('.sc-data').animate({ scrollTop: scrollTop }, 500) }) 
 .sc-data{ max-height: 300px; overflow-y: scroll; } #sc-wrap{ display: flex; flex-wrap: wrap; overflow-y: hidden; z-index: 11; } #sc-wrap > .sc-controller{ background: #e61a1a; border-radius: 4px; padding: 7px 10px; margin-right: 5px; margin-bottom: 5px; margin-top: 0px; color: white; font-family: Lato, Arial, sans-serif; font-size: 14px;; cursor: pointer; transition: all .45s; } #sc-wrap > .sc-controller:hover{ background: #f33; } #sc-wrap > .sc-controller:last-child{ margin-right: 0; } 
 <div id="sc-wrap"> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 1</div> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 2</div> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 3</div> </div> <div class="container"> <div class="component sc-data"> <table> <thead> <tr> <th>НаимСнованиС</th> </tr> </thead> <tbody> <tr id="sc-position1"> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr id="sc-position2"> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr id="sc-position3"> <td>test</td> </tr> </tbody> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • By the way, it feels like when you click again it scrolls to the previous page - Albert Saitov
  • one
    Make a minimal reproducible example , we need not know about the armature and see its styles, if the problem is not in the armature, but in the animate - andreymal
  • UPD: made a repeatable example. - Albert Saitov
  • If you are given an exhaustive answer, mark it as accepted - Sergey-N13

1 answer 1

First, a few comments on your example. First, this code does not work correctly because the .offset().top method returns the distance to the top of the document. Your code would be correct if the scroll were on the document, but you have it in the table. This will become noticeable when in the table instead of test you add test1 , test2 , test3 . For this, first you need to get the distance from the upper border of the table to the desired element.

  var offsetAnchor = $('#' + target).offset().top; var offsetTable = $('.sc-data').offset().top; var offset = offsetAnchor - offsetTable;

Next you need to consider that when scrolling offset (). Top of the element can be negative

  var offsetAnchor = $('#' + target).offset().top; var offsetTable = $('.sc-data').offset().top; var scrollWrapper = $('.sc-data').scrollTop(); var offset = offsetAnchor - offsetTable + scrollWrapper;

Work code example

 $('#sc-wrap > .sc-controller').each(function(i, elem) { $(elem).attr('data-target', 'sc-position' + (i + 1)); }); $('.sc-controller').click(function() { var target = $(this).attr('data-target'); var offsetAnchor = $('#' + target).offset().top; var offsetTable = $('.sc-data').offset().top; var scrollWrapper = $('.sc-data').scrollTop(); $('.sc-data').animate({ scrollTop: offsetAnchor - offsetTable + scrollWrapper }, 500); }) 
 .sc-data { max-height: 300px; overflow-y: scroll; } #sc-wrap { display: flex; flex-wrap: wrap; overflow-y: hidden; z-index: 11; } #sc-wrap>.sc-controller { background: #e61a1a; border-radius: 4px; padding: 7px 10px; margin-right: 5px; margin-bottom: 5px; margin-top: 0px; color: white; font-family: Lato, Arial, sans-serif; font-size: 14px; ; cursor: pointer; transition: all .45s; } #sc-wrap>.sc-controller:hover { background: #f33; } #sc-wrap>.sc-controller:last-child { margin-right: 0; } 
 <div id="sc-wrap"> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 1</div> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 2</div> <div class="sc-controller">ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ 3</div> </div> <div class="container"> <div class="component sc-data"> <table> <thead> <tr> <th>НаимСнованиС</th> </tr> </thead> <tbody> <tr id="sc-position1"> <td>test1</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr id="sc-position2"> <td>test2</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr> <td>test</td> </tr> <tr id="sc-position3"> <td>test3</td> </tr> </tbody> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>