Hi - i have designed a page that uses a jquery script in a div in the
middle of the page (below the logo and upper nav) Every time I click
on a button that is part of the script, the page jumps down to the top
of that jquery div. I want the page to stay rooted to the top. I can't
tell whether this is a problem with the css or the js script. Any help
would be greatly appreciated!!
 -Lisa

~ page: http://www.supermarketsmarty.com/new/index22.html
~ page css: http://www.supermarketsmarty.com/new/css/global.css


~ script css:

* { margin: 0; padding: 0; }
#page-wrap {
 width: 822px;
 height: 400px;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;

}
a {
 text-decoration: none;

}
#one .col-two.col h1, #two .col-two.col h1, #three .col-two.col h1 {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 30px;
 color: #FF6517;
 width: 582px;
 padding: 0px;
 margin-top: 5px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: -40px;
}

h3 {
 color: #FFFF00;
 font-size: 20px;
 line-height: 24px;
 text-align: center;
 width: 186px;
 margin-left: 15px;
 border-bottom-width: thin;
 border-bottom-style: solid;
 border-bottom-color: #FFF;
 padding-bottom: 4px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#one .col-one.col ul, #two .col-one.col ul, #three .col-one.col ul {
 list-style-position: inside;
 list-style-type: disc;
 margin-left: 26px;
 margin-top: 15px;
}
#one .col-one.col ul li, #two .col-one.col ul li, #three .col-one.col
ul li {
 font-size: 20px;
 color: #FFF;
 padding-bottom: 10px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}



#one .col-one.col img, #two .col-one.col img, #three .col-one.col img
{
 margin-top: 20px;
 margin-right: 0px;
 margin-bottom: 20px;
 margin-left: 60px;
}


.tabs {
 list-style: none;
 overflow: hidden;
 padding-left: 1px;
 margin-left: 50px;
 height: 34px;
}
.tabs li {
 display: inline;
}
.tabs li a {
 display: block;
 float: left;
 padding: 2px 8px;
 color: #FF6517;
 border: 1px solid #ccc;
 margin: 0 0 0 -1px;
 background-image: url(/new/images/btn-bk.jpg);
 background-repeat: repeat-x;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 18px;
}
.tabs li a.current {
 background: white;
 position: relative;
 top: -2px;
 z-index: 2;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #CCC;
 border-top-style: none;
}
.box-wrapper {
 height: 354px;
 position: relative;
 background-image: url(/new/images/homebox-bkg.gif);
 background-repeat: no-repeat;
 background-position: left top;
 margin-top: 0px;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 0;
 padding-top: -1px;
 padding-right: 2px;
 padding-bottom: 0px;
 padding-left: 2px;
}
.content-box {
 overflow: hidden;
 position: absolute;
 top: -1px;
 left: 1px;
 width: 819px;
 height: 352px;
}

.current { }
.col-one, .col-two, .col-three { width: 30%; float: left; position:
relative; top: 350px; }
.col-one, .col-two {
 margin-right: 3%;
}
.pricebadge {
 float: right;
 margin-top: 44px;
 margin-right: 0px;
 padding: 0px;
 clear: both;
}
#buy a:link{
 background-image: url(/new/images/order-btn-sprite.gif);
 background-repeat: no-repeat;
 height: 38px;
 width: 119px;
 float: right;
 margin-top: 320px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 40px;
 background-position:0px 0px;

}

#buy a:hover{
 background-position:0px 40px;
}
.product-placement {
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: -30px;
}

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++

script js:
var columnReadyCounter = 0;

// This is the callback function for the "hiding" animations
// it gets called for each animation (since we don't know which is
slowest)
// the third time it's called, then it resets the column positions
function ifReadyThenReset() {

 columnReadyCounter++;

 if (columnReadyCounter == 3) {
 $(".col").not(".current .col").css("top", 350);
 columnReadyCounter = 0;
 }

};

// When the DOM is ready
$(function() {

 var $allContentBoxes = $(".content-box"),
 $allTabs = $(".tabs li a"),
 $el, $colOne, $colTwo, $colThree,
 hrefSelector = "",
 speedOne = 1000,
 speedTwo = 2000,
 speedThree = 1500;

 // first tab and first content box are default current
 $(".tabs li:first-child a, .content-box:first").addClass("current");
 $(".box-wrapper .current .col").css("top", 0);

 $("#slot-machine-tabs").delegate(".tabs a", "click", function() {

 $el = $(this);

 if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {

 // current tab correctly set
 $allTabs.removeClass("current");
 $el.addClass("current");

 // optional... random speeds each time.
 speedOne = Math.floor(Math.random()*1000) + 500;
 speedTwo = Math.floor(Math.random()*1000) + 500;
 speedThree = Math.floor(Math.random()*1000) + 500;

 // each column is animated upwards to hide
 // kind of annoyingly redudundant code
 $colOne = $(".box-wrapper .current .col-one");
 $colOne.animate({
 "top": -$colOne.height()
 }, speedOne);

 $colTwo = $(".box-wrapper .current .col-two");
 $colTwo.animate({
 "top": -$colTwo.height()
 }, speedTwo);

 $colThree = $(".box-wrapper .current .col-three");
 $colThree.animate({
 "top": -$colThree.height()
 }, speedThree);

 // new content box is marked as current
 $allContentBoxes.removeClass("current");
 hrefSelector = $el.attr("href");
 $(hrefSelector).addClass("current");

 // columns from new content area are moved up from the bottom
 // also annoying redundant and triple callback seems weird
 $(".box-wrapper .current .col-one").animate({
 "top": 0
 }, speedOne, function() {
 ifReadyThenReset();
 });

 $(".box-wrapper .current .col-two").animate({
 "top": 0
 }, speedTwo, function() {
 ifReadyThenReset();
 });

 $(".box-wrapper .current .col-three").animate({
 "top": 0
 }, speedThree, function() {
 ifReadyThenReset();
 });

 };

 });

});