Jquery：把它变成一个函数？将主体滚动到#id，并带有可选的偏移量和速度等

Question

我正在尝试创建一个可以反复使用的函数。我已将其设置为如果链接指向页面上的 H2 ID，则它将滚动到偏移量 + 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

speed = 1500

显然，我需要一些帮助来实现此功能，或者如果您认为可以使其比上面的小示例更有效，请分享。

Answer 1

这相当简单，您可能想得太多了：

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 );
}