Оптимизация кода

[Alexander Belov]

Привет!

Есть функция, привязанная к событию .on( "click" )
Эта функция "перематывает" контент страницы на нужную соответствующую секцию.

$( ".red" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".red_zone" ).offset().top
		}, 1000);

	});

	$( ".blue" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".blue_zone" ).offset().top
		}, 1000);

	});

Допустим, таких секций много. Каким образом можно оптимизировать код, учитывая, что функция scrollTop всегда будет "перематывать" страницу на одну и ту же величину (отступ в 1000px), но всегда к разным сецкиям. Т.е. каждой кнопке соответствует своя секция. 10 разных кнопок - 10 разных секций но с одной и той же функцией по сути.

И второй вопрос: к примеру, есть функция doSmth().

Можно ли её прописать как дефолт к событию .on( "click" ) для моих элементов?
Т.е., чтобы не приходилось в конце каждой такой функции вызывать функцию doSmth() "вручную" как показано в коде ниже?

$( ".red" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".red_zone" ).offset().top
		}, 1000);

                doSmth();

	});

	$( ".blue" ).on( "click", function(){

		$( "html, body" ).animate({
			scrollTop: $( ".blue_zone" ).offset().top
		}, 1000);
      
                 doSmth();


	});

[Decode]

Про делегирование прочитай.

[Vlasenko Fedor]

Пример решения

[Alexander Belov]

Decode,
Я немного знаком с делегированием. Я понимаю, что оно актуально для кода с множеством вложений. Чтобы при клике на любом "слое" событие срабатывало на корневом элементе.
Каким образом его использовать в моём вопросе, мне непонятно.

[Decode]

Alexander Belov, дак тебе же Poznakomlus привел пример.

[Alexander Belov]

Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.

[Decode]

Decode,
Я видел, да. То, что нужно. Но там без делегирования, насколько я понял.

С делегированием.

[Alexander Belov]

Decode,
Благодарю. Увидел.

[Alexander Belov]

Объясните, пожалуйста, почему именно делегирование использовалось для решения такой задачи (в чём его
преимущество в данном случае?).

+ не понял, почему в функции прописано return false
Без возврата false тоже работает, вроде.

* Created by Fedor Vlasenko [email]VlasenkoFedor@mail.ru[/email]
 */
!function($){
   $(document).on('click', 'a[href^=#]', function () {
        $('html, body').animate({ scrollTop:  $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); 
        return false;
    });
}(jQuery);

[Vlasenko Fedor]

отменяем действие стандартного обработчика клика по ссылке
не пишем историю, не изменяем адресную строку
можно использовать и event.preventDefault()