Jquery height() scroll problem

Question

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?

James Montagne · Accepted Answer · 2012-05-03 03:01:49Z

3

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.

edited May 3, 2012 at 3:01

answered Apr 24, 2011 at 18:35

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mattsven · Accepted Answer · 2011-04-24 18:36:51Z

0

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.

answered Apr 24, 2011 at 18:36

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

Comments

Halcyon · Accepted Answer · 2011-04-24 18:41:59Z

0

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.

answered Apr 24, 2011 at 18:41

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Comments

DJafari · Accepted Answer · 2011-04-24 18:42:24Z

<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">

kobe · Accepted Answer · 2011-04-24 19:21:15Z

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   
                        });

Collectives™ on Stack Overflow

Jquery height() scroll problem

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related