切换 div 跳回页面顶部

Question

我有一个带有可点击 div 的页面，点击时会切换内容。第二次单击 div 时（关闭内容），页面跳回顶部。

我看到这是其他人遇到的问题，但是我发现的所有解决方案都与锚标签有关，这不是这里的问题。

我尝试根据解决方案here 更改我的代码并添加return false; 和event.preventDefault();，但这些都不起作用。我做错了什么？

jQuery:

    $(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });
    });

HTML 结构（在页面上重复多次）：

    <div class="more" id="franceFlag"></div>
    <div class="infoWindow franceFlag">
        <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" />
        <p class="franceFlag">blah blah blah</p>
    </div>      
    <div class="more" id="heliBoth"></div>
    <div class="infoWindow heliBoth">
        <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" />
        <p class="heliBoth">blah blah blah</p>
    </div>      

Here is a fiddle - 如果你滚动到右下角，然后点击旗帜旁边的 + 号，你就会明白我的意思了。

Answer 1

这是因为您隐藏了赋予容器高度的元素，然后显示了不同的元素。所以它暂时没有高度。

如果您明确地为容器指定高度，则不会发生这种情况。例如。

#lp-foundry-container {
height: 940px;
}

第一次点击不会发生同样的事情，因为您会立即进行隐藏和显示。如果你要改变

$('#heroNoColor').show();

到

$('#heroNoColor').fadeIn('fast');

就像在关闭功能上一样，那么在第一次点击时也会发生同样的事情。

Answer 2

试试这个

---

JQuery

$(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });

                //What I added
                $(".more").click(function()
                {
                    var div = $(this);
                    $(window).scrollTop(div.offset().top).scrollLeft(div.offset().left);
                });
    });

基本上，您只是获取单击的 div 的当前顶部和左侧位置，并在完成后将页面设置为在该点定位。

Fiddle Demo

顺便说一句，这是一个很酷的主意，干得好！

Answer 3

我知道的唯一解决方案是：

  $(document).ready(function(){
        ....
        $('.more').toggle(
                function(){
                   ...
                },
                function(){
                  var tempTop = $(window).scrollTop(); //<----remember Y
                  var tempLeft = $(window).scrollleft(); //<----remember X
                  .... your code here ...
                  //----> now restore the position
                  $(window).scrollTop(tempTop);
                  $(window).scrollLeft(tempLeft);

                }
        );