attiva il salto indietro all'inizio della pagina

Question

Ho una pagina con div cliccabili che attivano o disattivano il contenuto quando si fa clic. Quando il div viene cliccato la seconda volta (chiudendo il contenuto), la pagina torna indietro in alto.

Vedo che questo è un problema che altre persone hanno avuto, ma tutte le soluzioni che ho trovato sono legate al tag di ancoraggio, che non è il problema qui.

Ho provato a cambiare il mio codice per la soluzione here e ad aggiungere return false; e event.preventDefault(); ma nessuno di quelli ha funzionato. Che cosa sto facendo di sbagliato?

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

struttura HTML (questo si ripete più volte nella pagina):

<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 - Se si scorre in basso a destra, e fare clic sul + segno accanto alla bandiera, vedrai cosa intendo.

Answer 1

È perché si nasconde l'elemento che ha dato la vostra altezza del contenitore, mostrando poi un altro. Quindi per un breve periodo non ha altezza.

Se si assegna espressamente un'altezza al contenitore, ciò non accadrà. per esempio.

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

La stessa cosa non accade al primo clic, perché si nasconde e si mostra istantaneamente. Se si dovesse cambiare

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

a

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

Come è sulla funzione di chiusura, poi la stessa cosa sarebbe accaduto al primo scatto.

Answer 2

Prova questo

---

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

In sostanza si sta solo prendendo la parte superiore corrente e le posizioni di sinistra del div cliccato e l'impostazione della pagina di posizionarsi in quel punto una volta che si sono fatti.

Fiddle Demo

BTW questo è un idea piuttosto fresco, Bel lavoro!

Answer 3

L'unica soluzione che so è questo:

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

       } 
     );