Jquery height()滚动问题

Question

所以我有一个很大的长文本块，我试图使用 jquery 来隐藏/显示它来更改包含文本的 div 的 css 高度。

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

每当用户尝试显示/隐藏内容时，浏览器都会自动滚动到页面顶部。当用户单击显示/隐藏链接时，防止滚动位置发生变化的最佳方法是什么？

Answer 1

您的链接上可能有 href="#"。这将使链接将您带到页面顶部。尝试将其更改为 href="javascript:void(0)" 或其他内容。

Answer 2

您是否尝试过存储 scrollTop 值并恢复它？最重要的是，如果您的链接使用 # 作为其 href，则需要在点击函数中 return false;。

Answer 3

假设您确实有 href="#"。你不需要 javascript:void(0);或者scrollTop废话。只需在 onclick 处理程序末尾返回 false 即可。

返回 false 将停止传播并取消单击带有哈希的链接时发生的正常事件，即，如果名称为空，它将跳转到指定的锚点或页面顶部。

Answer 4

<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() 函数将 center_slide_down 滚动到 < div id="此处">

Answer 5

使用返回 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   
                        });