Animate a div with a toggled class. jquery

Question

I'm trying to animate my page to certain points once i click on some elements.
By now i've been able to animate the page to the top of the div by clicking a button; i toggle the class of the button for having another image for the closing button.
The problem appears when I try to animate the page to the top when clicking the button with the new class .btn_close.
I asume is something wrong in my code, as if it does not recognize the new class.

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

I've made this fiddle: http://jsfiddle.net/weberjavi/wBkf9/5/

Thank you so much!

EDITED!(25/04/2014)
In the first question I tried to simplify my code, and the fact is that I'm not trying to toggle between the words open and close (so I'm actually not using the chunk of code with the if/else sentence) but between two images.
My code should look something more similar to this:

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

I have several sections with hidden content and I want the entire page scrolls to the top of the header each time I close a section.
I've made another fiddle: http://jsfiddle.net/weberjavi/ACH5L/ (Any way I do not know how to show the buttons in the fiddle).
I should probably create a variable to store the information of the class toggling, but I'm new in the JS world and really don't know how to reach this point.
P.S: G.Mendes thanks so much for the help and sorry for the misunderstanding.

Answer 1

The problem with $('.btn_close').click() event is that the element doesn't exist the moment its declared so the event is not bound to the element since it will still receive the class. A workaround is to make a function instead to be called:

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

replacing the last 2 click events, and change this block:

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

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

---

EDIT: The question edit has a similar problem, one way or another we need to check the current state of the section, either opened or closed, or the close event will never be fired and yes it will always animate to section offset if there's no check:

$("#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/