JQuery: Включите это в функцию? прокручивая тело до #id с дополнительным смещением и скоростью и т. д.

Question

Я пытаюсь создать функцию, которую я могу использовать снова и снова. Я настроил его так, чтобы ссылка указывала на идентификатор на странице, которая является H2, затем она прокручивается до цели со смещением + 10px, а затем несколько раз исчезает стрелка. Но если ссылка указывает на элемент #footer, то она должна прокручиваться вниз по странице, а затем, когда вы приземляетесь на цель, несколько раз меняет цвет фона с синего на голубой, затем возвращается к синему.

Что было бы самым эффективным способом сделать с этим функцию? Так что я не повторяю код?

var target = $(this).attr("href"); ............... 
     if ($(target).is('#foot_wrapper')) { 
      $('html,body').delay(600).animate({ 
        scrollTop: $(target).offset().top - $(window).height() + 139 
      }, 1500, function() { 
       $('#bottomline').animate({ 
        backgroundColor: "#2f5e9f" 
       }, 300).animate({ 
        backgroundColor: "#76acfb" 
       }, 300) 

      }) 
     } else if ($(target).is('#header')) { etc. etc. etc. 

, используя некоторые из моего кода выше, что-то вроде этого, я думаю, что ...:

function scrollToAnimate (ifTargetIsThis, yOffset, speed, callback) 

ifTargetIsThis = #foot_Wrapper

YOffset = - $(window).height() + 139

скорость = 1500

Очевидно, мне нужно некоторые помогают сделать эту функцию, или если вы думаете, что можете сделать ее более эффективной, чем мой маленький пример выше, пожалуйста, поделитесь.

Answer 1

Это довольно просто, вы, вероятно, overthinking его:

var scrollToAnimate = function (yOffset, speed, callback) { 
    $('html,body').delay(speed*0.4).animate({ 
    scrollTop: $(target).offset().top + yOffset 
    }, speed, callback}); 
} 

Обратите внимание, я оставил ifTargetIsThis из аргументов, потому что я думаю, что все равно должны происходить за пределами функции, которые вы назвали бы так:

if ($(target).is('#foot_wrapper')) { 
    scrollToAnimate(-$(window).height() + 139, 1500, function() { 
    $('#bottomline').animate({backgroundColor: "#2f5e9f"}, 300) 
        .animate({backgroundColor: "#76acfb"}, 300); 
    }); 
} else if ($(target).is('#header')) { 
    scrollToAnimate(etc, etc, etc); 
}