使用切换类为 div 设置动画。 jQuery

Question

单击某些元素后，我正在尝试将我的页面设置为某些点。
到目前为止，我已经能够通过单击按钮将页面动画到 div 的顶部；我切换按钮的类别，以获得关闭按钮的另一个图像。
当我尝试在单击具有新类 .btn_close 的按钮时将页面设置为顶部动画时出现问题。
我认为我的代码有问题，好像它无法识别新类。

$("#content").hide();
$("[class^=btn]").click(function () {
    $(this).toggleClass("btn_open btn_close")
    if($(this).hasClass("btn_close")){
      $(this).text("close")
    }else{
      $(this).text("open")
    }
   $("#content").toggle("slow");
    return false;
}); 


$("#btn").click(function() {
    $('body').animate({
    scrollTop: $("#btn").offset().top
    }, 800);
});

$(".btn_close").click(function ()   {
    $('body').animate({
    scrollTop: $("#header").offset().top
    }, 800);
});

我做了这个小提琴：http://jsfiddle.net/weberjavi/wBkf9/5/

非常感谢！

已编辑！（2014 年 4 月 25 日）
在第一个问题中，我试图简化我的代码，事实是我并没有试图在打开和关闭这两个词之间切换（所以我实际上并没有使用 if/else 语句的代码块）而是在两张图片。
我的代码应该看起来更类似于：

$("[class^=arrow]").click(function () {
    $(this).toggleClass("arrow_down arrow_up");
}); 


$("#content_section_1").hide();
$("#btn_1").click(function () {
    $("#content_section_1").toggle("slow");
    return false;
}); 

$("#content_section_2").hide();
$("#btn_2").click(function () {
    $("#content_section_2").toggle("slow");
    return false;
}); 

$("#btn_1").click(function() {
    $('html, body').animate({
    scrollTop: $("#section_1").offset().top
    }, 800);
});

$("#btn_2").click(function() {
    $('html, body').animate({
    scrollTop: $("#section_2").offset().top
    }, 800);
});

我有几个包含隐藏内容的部分，我希望每次关闭一个部分时整个页面都滚动到标题的顶部。
我又做了一个小提琴：http://jsfiddle.net/weberjavi/ACH5L/（无论如何我都不知道如何在小提琴中显示按钮）。
我可能应该创建一个变量来存储类切换的信息，但我是 JS 世界的新手，真的不知道如何达到这一点。
P.S: G.Mendes 非常感谢您的帮助，并对造成的误解深表歉意。

Answer 1

$('.btn_close').click() 事件的问题在于该元素在其声明的那一刻不存在，因此该事件未绑定到该元素，因为它仍会接收该类。 一种解决方法是创建一个函数而不是被调用：

//was changed so  the animation wouldn't interfere in the 
//scrollTop animation upon close
function open() {
  $('body, html').animate({ //body & html to work in all browsers
    scrollTop: $("#btn").offset().top
  }, 800);
}

//changed to be able to be called
function close(){
  $('body, html').animate({ //body & html to work in all browsers
    scrollTop: $("#header").offset().top
  }, 800);
}

替换最后 2 次点击事件，并更改此块：

if($(this).hasClass("btn_close")){
  $(this).text("close");
  open(); //added line
}else{
  $(this).text("open");
  close(); //added line
}

FIDDLE： http://jsfiddle.net/wBkf9/10/

---

编辑： 问题编辑有类似的问题，我们需要以一种或另一种方式检查该部分的当前状态，无论是打开还是关闭，或者永远不会触发关闭事件，是的，如果没有检查，它将始终动画到部分偏移：

$("#btn_1").click(function() {
  //check if its closed to fire close event
  if($(this).hasClass('arrow_down'))
   close();
  else{
    $('html, body').animate({
    scrollTop: $("#section_1").offset().top
    }, 800);
  }
});

function close(){
    $('html, body').animate({
    scrollTop: $("#header").offset().top
    }, 800);
}

FIDDLE 2： http://jsfiddle.net/ACH5L/2/