scrolling back and forth with ScrollTo

Site's at http://cocktail.juggernautwebsites.com/ and I'm working in the footer. I'm trying to scroll the #pane div in the footer when clicking on that 'Contact' bubble.

I managed to get what I want to scroll properly to the left, but I can't get it to scroll back to the right (aka original po开发者_Python百科sition). If I enter

$('#pane').scrollTo( 0 , 600,{axis:'x'});

in the Chrome console, I can get it to slide... Here's my code:

$(document).ready(function(){
$('.contact-scroll').click(function(){
    $('#pane').scrollTo( 720 , 600  );
    $('.contact-scroll').addClass('scrolled');
    $('.contact-scroll').removeClass('contact-scroll');     
    return false;       
});

$('.scrolled').click(function(){
    $('#pane').scrollTo( 0 , 600,{axis:'x'});   
    $('.scrolled').addClass('contact-scroll');
    $('.scrolled').removeClass('scrolled');     
    return false;               
}); 

});

I didn't originally have the complicating addClass and removeClass, this is what I was originally working with and it didn't work either:

$(document).ready(function(){
$('.contact-scroll').click(function(){
    $('#pane').scrollTo( 720 , 600  );
    $('.contact-scroll').addClass('scrolled');
    return false;       
});

$('.scrolled').click(function(){
    $('#pane').scrollTo( 0 , 600  );
}); 
});

The problem is the click event isn't firing correctly.

$('.contact-scroll').live('click', function(){

and

$('.scrolled').live('click', function(){

should solve the problem.

However, you may want to consider having one click event and checking for the scroll status:

$('#pane').click( function() {
    if ($(this).hasClass('scrolled')) {
      $(this).scrollTo( 0 , 600,{axis:'x'});
    } else {
      $(this).scrollTo( 720 , 600,{axis:'x'});
    }
    $(this).toggleClass('scrolled');
});