Toggle auf Div springen zurück zum Anfang der Seite

Question

Ich habe eine Seite mit anklickbaren divs, die Inhalt umschalten, wenn geklickt wird. Wenn das div zum zweiten Mal geklickt wird (Schließen des Inhalts), springt die Seite wieder nach oben.

Ich sehe, das ist ein Problem, das andere Leute hatten, aber alle Lösungen, die ich gefunden habe, sind mit dem Anker-Tag verwandt, was hier nicht das Problem ist.

Ich habe versucht, meinen Code pro die Lösung here und return false; und event.preventDefault(); hinzufügen, aber keiner von denen funktioniert. Was mache ich falsch?

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-Struktur (dies mehrmals auf der Seite wiederholt):

<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 - wenn Sie blättern nach rechts unten, und klicken Sie auf + Schild neben der Flagge, du wirst sehen, was ich meine.

Answer 1

Es ist, weil Sie das Element versteckt sind, die Ihre Behälterhöhe gab, dann ein anderes zeigt. Es hat also kurz keine Höhe.

Wenn Sie Ihrem Container explizit eine Höhe geben, wird das nicht passieren. z.B.

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

Das gleiche geschieht nicht auf den ersten Klick, da Sie die Haut tun und zeigen sofort. Wenn Sie

waren

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

zu

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

zu ändern, wie es auf der Close-Funktion ist, dann würde die gleiche Sache auf den ersten Klick passieren.

Answer 2

Versuchen Sie, diese

---

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

Grundsätzlich sind Sie nur die aktuelle oberen und linken Positionen der geklickten div nehmen und Einstellen der Seite selbst, wenn Sie an diesem Punkt zu positionieren sind fertig.

Fiddle Demo

BTW ist dies eine ziemlich coole Idee, Nice job!

Answer 3

Die einzige Lösung, die ich kenne, ist dies:

$(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); 

       } 
     );