Untitled

I've wrapped your code in a plugin. Hope it's useful.

Usage:
In your HTML,  an element that you want to act as footer (ex. #footer), an element to act as trigger (ex. #trigger) are assumed.

apart from this html file, you'll need to include my snippet somehow, and also bind it to your footer element.

Here is an example illustrating the interdependent code bits:


Files:
----------------

| index.html
| footer_toggle.js
| application.js

index.html:
----------------

<body>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script src="footer_toggle.js"></script>
    <script src=application.js"></script>
  </head>
  <body>
    .
    .
    .
    <div id="trigger">
      <p>About</p>
    </div>
    .
    .
    .
    <div id="footer">
      <p>I am a footer</p>
    </div>
    .
    .
    .
  </body>
</html>

footer_toggle.js:
----------------

(function( $ ){
  $.fn.footerToggle = function( method ) {

    var methods = {

      init : function( options ) {

        var settings =  {
          'speed' : 200,
          'footer_element' : $(this),
          'button' : $('#about_button')
        };

        if ( options ) {
          $.extend( settings, options );
        }

        return this.each(function() {

          var $this = $(this);

          var slide = false;
          var height = settings['footer_element'].outerHeight();

          settings['button'].click(function() {
            var docHeight = $(document).height();
            var windowHeight = $(window).height();
            var scrollPos = docHeight - windowHeight + height;
            settings['footer_element'].animate({ height: "toggle"}, settings['speed']);
            if(slide == false) {
              if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
                $('html').animate({scrollTop: scrollPos+'px'}, settings['speed']);
              } else {
                $('html, body').animate({scrollTop: scrollPos+'px'}, settings['speed']);
              }
              slide = true;
            } else {
              slide = false;
            }
          });

        });

      }

    };

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.footerToggle' );
    }

  };

})( jQuery );

application.js
----------------

jQuery(function($) {
  $('#footer').footerToggle({'button' : $('#trigger')});
});