使用切换的类设置div的动画。jquery

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

我做了这把小提琴：

非常感谢您

编辑！（2014年4月25日）
在第一个问题中，我试图简化我的代码，事实上，我并没有试图在单词open和close之间切换（因此我实际上没有在if/else语句中使用代码块），而是在两个图像之间切换。
我的代码应该与此更相似：

我有几个隐藏内容的部分，我希望每次关闭一个部分时，整个页面都会滚动到页眉的顶部。
我又做了一把小提琴：（无论如何我都不知道如何显示小提琴上的按钮）。
我可能应该创建一个变量来存储类切换的信息，但我是JS领域的新手，真的不知道如何达到这一点。
P.S:G.Mendes非常感谢您的帮助，并对误会表示歉意

事件

$（'.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
}

小提琴：

---

编辑： “问题编辑”也有类似的问题，我们需要以某种方式检查节的当前状态（打开或关闭），否则将永远不会触发“关闭”事件，并且如果没有检查，它将始终动画显示为“节偏移”：

$("#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);
}

---

小提琴2:

我已经编辑了这个问题，以便更好地与我正在讨论的问题相匹配。无论如何，非常感谢。@JaviAbia我很抱歉我还不清楚，问题是当你关闭任何部分时，滚动到页面顶部？是的@G.Mendes这就是重点。每次我关闭一个部分时，我都想滚动到页面顶部，这样每次你关闭一个部分时，你都可以看到整个页面。就是这样！！非常感谢@G.Mendes

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

$("#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);
}