JQuery Smooth scroll not working! (with 3 different methods

JQuery Smooth scroll not working! (with 3 different methods

Hi there guys, im new to the forum

Sorry if its a bit lengthy but I desperately need some aid (gotta finish the site by tomorrow

I have been trying to get this JQuery smooth scroll to work for virtually the whole day but haven't had much luck. I basically have a div section labelled with the id "#topoffooter" and I want to click an image on the navbar so that the window would scroll down smoothly as appropriate. I have tried the following:

1st Method:
I put the following in the head section:

$.fn.scroller = function() {
   var speed = 'slow'; // Choose default speed
   $(this).each(function() {
      $(this).bind('click', function() {
         var target = $(this).attr('#topoffooter'); // Get scroll target
         $(target).ScrollTo(speed);
         return false;
      });
   });
}


with both "jquery-1.2.6.js" and "interface.js" in the head section and putting onclick="$.fn.scroller()" in the img tag (this method came from here: "http://snipplr.com/view/5988/jquery-smotth-scroll-to-anchor-links/")

2nd Method:
I put the following into the head section:

      $(document).ready(function() {
        $('#scrollbutton').click(function() {
          var divOffset = $('#header').offset().top;
          var pOffset = $('#topoffooter)').offset().top;
          var pScroll = pOffset - divOffset;
          $('html,body').animate({scrollTop: '+=' + pScroll + 'px'}, 1000, 'bounceout');
         });
      });


with "jquery-1.2.6.js" in the head section and i gave the image that was being clicked an ID of "scrollbutton"

3rd Method:
I put the following into the head section (also tried in the body just to see):

function scrollWin(){
   $('html, body').animate({
   scrollTop: $("#topoffooter").offset().top
    }, 2000);
}


with "jquery-1.2.6.js" in the head section and putting onclick="scrollWin()" in the img tag (this method came from here: "http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery/")

None of these worked, I would click the button but nothing would happen, my head section looks like this without anything to do with the scrolling effect in it:

<head>
   <link rel="stylesheet" type="text/css" href="formatting.css" />
   <link rel="stylesheet" type="text/css" href="type.css" />
   <link rel="stylesheet" href="dd-formmailer.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
      <script type="text/javascript" src="js/prototype.js"></script>
      <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
      <script type="text/javascript" src="jquery-1.2.6.js"></script>
      <script type="text/javascript">jQuery.noConflict();</script>
      <script type="text/javascript" src="js/lightbox.js"></script>
      
   <script type="text/javascript" src="stepcarousel.js">

   /***********************************************
   * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
   * This notice must stay intact for legal use
   ***********************************************/

   </script>

   <style type="text/css">

   .stepcarousel{
   position: relative; /*leave this value alone*/
   border: 0;
   overflow: scroll; /*leave this value alone*/
   width: 892px; /*Width of Carousel Viewer itself*/
   height: 294px; /*Height should enough to fit largest content's height*/
   left: 6px;
   }

   .stepcarousel .belt{
   position: absolute; /*leave this value alone*/
   left: 0;
   top: 6px;
   width: 890px;
   }

   .stepcarousel .panel{
   float: left; /*leave this value alone*/
   overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
   margin: 0; /*margin around each panel*/
   width: 892px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
   }

   </style>
      
   <script type="text/javascript">
      var revert = new Array();
      var inames = new Array('home', 'about', 'services', 'portfolio', 'quote', 'contact');

      // Preload
      if (document.images) {
        var flipped = new Array();
        for(i=0; i<inames.length; i++) {
         flipped[i] = new Image();
         flipped[i].src = inames[i]+"2.png";
        }
      }

      function over(num) {
        if(document.images) {
         revert[num] = document.images[inames[num]].src;
         document.images[inames[num]].src = flipped[num].src;
        }
      }
      function out(num) {
        if(document.images) document.images[inames[num]].src = revert[num];
      }
   </script>
</head>


As you can see, the stepcarousel viewer and lightbox are using jquery and i have a little rollover function in there as well (ill clean it all up once i have got everything functioning correctly) which does not use JQuery.

I would really appreciate it if someone could help out because i am truly lost and my javascript knowledge is very limited, any questions please ask.

Thanks a lot guys