CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Thomas
Thomas

Reputation: 5089

Jquery height() scroll problem

So I have this big long block of text that I am trying to hide/reveal using jquery to change the css height for the text's containing div. 

<script>
                    $(document).ready(function() {
                        $('#center_slide_down_link').click(function() {
                            $('.center_slide_down').animate({
                                height: 1200
                            }, 1000 );
                            $(this).hide();
                            $('#center_slide_up_link').show();      
                        });

                        $('#center_slide_up_link').click(function() {
                            $('.center_slide_down').animate({
                                height: 450
                            }, 1000 );
                            $(this).hide(); 
                            $('#center_slide_down_link').show();    
                        });



                    });
                    </script>

Whenever the user tries to reveal/hide the content, the browser automatically scrolls to the top of the page. What is the best method to keep the scroll position from changing when the user clicks the reveal/hide links?

Upvotes: 0

Views: 544

Answers (5)

James Montagne
James Montagne

Reputation: 78650

You probably have href="#" on your links. This will cause the link to bring you to the top of the page. Try changing that to href="javascript:void(0)" or something.

Upvotes: 3

kobe
kobe

Reputation: 15835

Use return false

$('#center_slide_down_link').click(function() {
                            $('.center_slide_down').animate({
                                height: 1200
                            }, 1000 );
                            $(this).hide();
                            $('#center_slide_up_link').show();   
                             return false // this will kill all bubling stuff   
                        });

                        $('#center_slide_up_link').click(function() {
                            $('.center_slide_down').animate({
                                height: 450
                            }, 1000 );
                            $(this).hide(); 
                            $('#center_slide_down_link').show();    
                            return false // this will kill all bubling stuff   
                        });

Upvotes: 0

DJafari
DJafari

Reputation: 13545

<script>
$(document).ready(function()
{
    $('#center_slide_down_link').click(function()
    {
        $('.center_slide_down').slideUp('fast',function()
        {
            $(this).css('height','1200px');
            $(this).slideDown('fast');
        });
    });

    $('#center_slide_up_link').click(function()
    {
        $('.center_slide_down').slideUp('fast',function()
        {
            $(this).css('height','450px');
            $(this).slideDown('fast');
        });
    });

    function go_to_here()
    {
        $(".center_slide_down").animate( { scrollTop: $('#here').offset().top } , 1000 );
    }
});
</script>

<div class="center_slide_down">
Some Text<br />
Some Text<br />
<div id="here">Some Text</div>
</div>

go_to_here() function scroll center_slide_down to < div id="here">

Upvotes: 0

Halcyon
Halcyon

Reputation: 57719

Assuming you indeed have href="#". You don't need javascript:void(0); or scrollTop nonsense. Just return false at the end of your onclick handler(s).

Returning false will stop propagation and cancel the normal event that occurs for clicking on links with a hash, ie it will jump to the named anchor or the top of the page in case of an empty name.

Upvotes: 0

mattsven
mattsven

Reputation: 23263

Have you tried storing the scrollTop value and restoring it? On top of that, if your links are using # as their href, you need to return false; in your click functions.

Upvotes: 0

Related Questions