Как правильно организовать скрипт добавления CSS класса?

Question

[efim23]

Собственно скрипт, который фиксирует нажатие на кнопку, после чего передает атрибут кнопки, который соответствует id'y блока на странице, в функцию, которая определяет позицию этого блока, в итоге получаем значение для скролла. Тут все работает идеально, но необходимо, чтобы после успешного скролла к блоку применялся класс из CSS. Прошу помощи! Спасибо.

$(document).ready(function(){
 function scrollToDiv(element){
     var offset = element.offset();
     var offsetTop = offset.top;
     var totalScroll = offsetTop-70;
  
     $('body,html').animate({
             scrollTop: totalScroll
     }, 400);
 }
 $('varnav button').click(function(){
     var el = $(this).attr('href');
     var elWrapped = $(el);
  
     scrollToDiv(elWrapped,40);
  
     return true;
 });
});

Answer 1

[larionov_n]

Последним аргументом в animate, добавьте функцию которая проставляет нужный класс.
Сигнатура animate: ( properties [, duration ] [, easing ] [, complete ] )

$('body,html').animate({
     scrollTop: totalScroll
     }, 400, 
     'easing',
     function(){
         element.addClass('testClass');
     }
);

Как-то так, обычный callback.

Comments

[efim23]

Спасибо, это то, что нужно!) А как сформулировать условие, что бы при нажатии на следующую кнопку у предыдущего срабатывал removeClass?

[larionov_n]

Я обычно записываю все кнопки в массив, перед тем, как поставить класс одному элементу, убираю класс у всех. Это если надо быстро сделать. Если не быстро, надо подумать :)

[larionov_n]

Без цикла, добавить переменную lastActivatedButton и перед тем как обновить переменную очищать у этой кнопки класс.