jqueryui hide and slide function jumps to the top

hi i am having some issue when using slide inside hide for jquery ui. It always jumps to the top of the page when i press a TAB which i've created. i have searched this site for solution relates to mine but seem to find no solution as mine is a little different from others. below are the code

 <ul id="about_navi">
        <li><span class="change_me selected" rel="first">About Us</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="second">Meet The Team</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="third">How We Work</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="fourth">Client Testimonial</span><span class="arrow_down"></span></li>
        <li><span class="change_me" rel="fifth">Our Products</span><span class="arrow_down"></span></li>
        <div class="clr"></div>
    </ul>

and here is the javascript

$(function(){
    $(".change_me").c开发者_开发百科lick(function(){
           var class_name = $(this).attr("rel");
           if(($(".context").is(":hidden"))){
                $('.context:visible').hide("slide", { direction: "right" }, 600,function(event){
                    $("."+class_name).show("slide", { direction: "left" }, 600);

                });

                return false;
            }

    })

the code is fine for only firefox which i've based upon entirely until someone told me that other browser is having this issue. Thanks in advance . Btw i am using jquery 1.4.3 and jqueryui 1.8.1

I hav manage to debug the issue. It is solveable by having the div or span of the content to have at least a min-height.

for example, since i am using class "context" to hide n show, i should have another div/span earlier and specify their css to hav minimum height of lets say.....500px. so regardless of show or hide, the scrollbar would be at its best which means not jumping.

I hope i am clear enough with my explanation. thanks.

You should try preventDefault()

$(".change_me").click(function( event ){

    event.preventDefault();

    // Your code...

});