Почему повторное использование animate( {scrollTop: ***}, 500) скролит страницу на предыдущую позицию?

Question

[dicem]

Вобщем, сделал табы для прокрутки таблицы в определенное место, почему то если я второй раз нажимаю на тот или иной таб, страница прокручивается на предыдущую позицию(хотя иногда вобще хз куда). Почему так происходит? И как пофиксить? Спасибо за помощь.

HTML

<div id="sc-wrap">
      <div class="sc-controller">Арматура А1</div>
      <div class="sc-controller">Арматура А3</div>
      <div class="sc-controller">Катанка</div>
    </div>
    <div class="container">
      <div class="component sc-data">
        <table>
          <thead>
            <tr>
              <th>Наименование</th>
              <th>Диаметр, мм</th>
              <th>Виды стали</th>
              <th>Длина, метры</th>
              <th>ГОСТ</th>
              <th>Цена руб. за тонну</th>
            </tr>
          </thead>
          <tbody>
            <tr sc-position="1">
              <td>Арматура 6 А1</td>
              <td>6</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / бухта</td>
              <td>5781-82</td>
              <td>от 43000</td>
            </tr>
            <tr>
              <td>Арматура 8 А1</td>
              <td>8</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 10 А1</td>
              <td>10</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 12 А1</td>
              <td>12</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / 11,7 /12 / бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 14 А1</td>
              <td>14</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / 11,7 /12 / бухта</td>
              <td>5781-82</td>
              <td>от 40000</td>
            </tr>
            <tr>
              <td>Арматура 16 А1</td>
              <td>16</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / 11,7 /12 / бухта</td>
              <td>5781-82</td>
              <td>от 40000</td>
            </tr>
            <tr>
              <td>Арматура 18 А1</td>
              <td>18</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>6 / 11,7 /12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 20 А1</td>
              <td>20</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 40000</td>
            </tr>
            <tr>
              <td>Арматура 22 А1</td>
              <td>22</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 40000</td>
            </tr>
            <tr>
              <td>Арматура 25 А1</td>
              <td>25</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 28 А1</td>
              <td>28</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 32 А1</td>
              <td>32</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 36 А1</td>
              <td>36</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 40 А1</td>
              <td>40</td>
              <td>А240 / ст3сп / ст3пс</td>
              <td>11,7 /12 /бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr sc-position="2">
              <td>Арматура 6 А3</td>
              <td>6</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / бухта</td>
              <td>5781-82</td>
              <td>от 40000</td>
            </tr>
            <tr>
              <td>Арматура 8 А3</td>
              <td>8</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / бухта</td>
              <td>5781-82</td>
              <td>от 42000</td>
            </tr>
            <tr>
              <td>Арматура 10 А3</td>
              <td>10</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / бухта</td>
              <td>5781-82</td>
              <td>от 45000</td>
            </tr>
            <tr>
              <td>Арматура 12 А3</td>
              <td>12</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 46000</td>
            </tr>
            <tr>
              <td>Арматура 14 А3</td>
              <td>14</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 16 А3</td>
              <td>16</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 18 А3</td>
              <td>18</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 20 А3</td>
              <td>20</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 22 А3</td>
              <td>22</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 25 А3</td>
              <td>25</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
            <tr>
              <td>Арматура 28 А3</td>
              <td>28</td>
              <td>ст3 / ст35ГС / ст25Г2С / А500с / А400с</td>
              <td>6 / 11,7 / 12 / бухта</td>
              <td>5781-82</td>
              <td>от 41000</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><!-- /container -->
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
    <script src="jquery.stickyheader.js"></script>
    <script src="main.js"></script>

JS(JQUERY)

$('html .sc-data').each( function(i, elem){ $(elem).attr('id', 'sc-data') });

$('#sc-wrap > .sc-controller').each( function(i, elem){
  $(elem).attr('sc-ctrl', i + 1)
});

$('.sc-controller').click( function(){
	var scrollTop = $('[sc-position='+$(this).attr('sc-ctrl')+']').offset().top;
	if ( $('.sticky-wrap').scrollTop() != scrollTop ) {
		$('.sticky-wrap').animate( {scrollTop:scrollTop}, 500 )
	}
})

Answer 1

[Alexey10]

Сделай табы ссылками. Обычные якоря вообщем.
И добавь код:

$('a[data-target="anchor"]').on('click', function(){
		var target = $(this).attr('href'),
			bl_top = $(target).offset().top;
		$('body, html').animate({scrollTop: bl_top}, 700);
		return false;
	});

Если не правильно понял. Скинь ссылку на сайт, чтобы наглядно смотреть.

Comments

[dicem]

мне конечно нравится такое решение :D только я уже по такому примеру миллион прайс листов оформил, поэтому хотелось бы в своем примере найти ошибку или апдейт какой.

[Alexey10]

Ссылку на сайт дай.

Answer 2

[Андрей]

у вас какой-то ад. все же проще

Comments

[dicem]

Ок, спасибо, думаю, все же гораздо лучше будет сделать по вашему.

[dicem]

Кстати, привел твой пример в свой вид, та же самая проблема, при повторном клике по элементу, тупо скроллит куда то в другое место, но не остается на своем.

[Андрей]

dicem, если вам в контейнере нужно то нужно поменять offset на
$(target).position().top;

[dicem]

Андрей, проблема не ушла(, все те же фантомные скроллы куда то

[Андрей]

dicem, покажите ваш код и когда срабатывают баги

[dicem]

Андрей, jsfiddle.net
Баг срабатывает когда я уже скажем нажал на "Позиция 1" а потом еще раз туда нажал, по сути то скролл не должен срабатывать, когда я нахожусь уже на той позиции, а он скроллит вобще в какое то другое место.

[Андрей]

dicem,
вроде все чётко

[dicem]

Андрей, странно, на фидле все работает,а на локалке TypeError: $(...).position(...) is undefined

[Андрей]

dicem, скорее всего на локале скрипт подключается до построение DOM перенесите перед

[dicem]

Андрей, простите меня Андрей за мою навязчивость, нив какую не хотело работать не на локалке не на хосте с вашим примером (я отлично понимаю, что на фиддле все перфекто), выскакивает та же ошибка TypeError: $(...).position(...) is undefined
Разместил свой багованный скрипт сюда:
https://tda-spb.ru/metall-armatura.html
уже и хз что делать

[Андрей]

dicem, в вашем случае нужно сделать так

scrollTop = $('#' + target).position().top+$('.sticky-wrap').scrollTop()

[dicem]

БОЖЕ ТЫ КОРООООЛЬ! Спасибо за помощь!!! Огромное спасибо!

[Андрей]

dicem, но проще добавить таблице position: relative; и оставить просто как было тоже сработает