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

<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（）函数scroll center_slide_down to＆lt; div id =“here”＆gt;

Answer 4

假设你确实有href =“＃”。你不需要javascript：void（0）;或者scrollTop废话。只需在你的onclick处理程序结束时返回false。

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

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

Jquery height（）滚动问题

5 个答案: