• User Attivo

    Anchor link

    Ciao a tutti,
    ho un problema nell'utilizzo di un anchor link, sto utilizzando uno script per renderlo più soft nello scorrimento, funziona tutto alla perfezione finché il contenuto è presente nel div principale non ha un'altezza specificata, viceversa invece quando il div ha un'altezza specifica.
    L'unico metodo che ho trovato è quello di creare un'altra pagina con un iframe che richiama quest'ultima, ma vorrei evitare questa strada, come potrei risolvere diversamente? grazie come sempre a tutti 🙂

    questo è lo script

    
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click (function() {
           var target = $(this).attr('href');
           $('html, body').stop().animate({
                    scrollTop: $(target).offset().top - 10
           }, 1500);
           
           return false; 
        });
        
        $('#go-home').click();
    });
    </script>
    
    questa è la pagina di prova:
    
    <style type="text/css">
    .a1 {
    	width: 400px;
    	float: left;
    	height: 1000px;
    }
    .a0 {
    	float: left;
    	width: 400px;
            height: 300px;  <--- il problema sta qui, avendo un'altezza fissa del contenitore lo script smette di funzionare
    	overflow: hidden;
    }
    </style>
    
    <div class="a0">
    <div class="a1">
    <a href="#pagina2">Contatti</a><br />
    pagina 1
    </div>
    
    <div class="a1"><a name="pagina2" id="pagina2"></a>
    pagina 2
    </div>
    
    
    
    
    

  • Super User

    Ciao cla83,
    mi sembra più un problema legato all'HTML/CSS.
    Forse dipende dai float, non saprei.
    Ma c'è una cosa che non capisco
    .a0 di altezza 300px contiene .a1 di altezza 1000px: mi sembra logicamente scorretto.


  • User Attivo

    Ciao Ayrton,
    grazie per la risposta.
    Si hai ragione, avevo fatto delle modifiche e ho sbagliato a postare il codice :arrabbiato:

    Il problema è l'altezza del div principale a0, eliminandola funziona, ma perdo la possibilità di limitare il contenuto nei soli 300 px di altezza.

    Questo problema non si verifica se tolgo il js e utilizzo le ancore di default.

    il codice è il seguente:

    
    
    <style type="text/css">
    .a1 {
    	width: 400px;
    	float: left;
    	height: 300px;
    }
    .a0 {
    	float: left;
    	width: 400px;
    	overflow: hidden;
    	height: 300px;  
    }
    </style>
    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('a').click (function() {
           var target = $(this).attr('href');
           $('html, body').stop().animate({
                    scrollTop: $(target).offset().top - 10
           }, 1500);
           
           return false; 
        });
        
        $('#go-home').click();
    });
    </script>
    
    <div class="a0">
    <div class="a1">
    <a href="#pagina2">Contatti</a><br />
    pagina 1
    </div>
    
    <div class="a1">
    <a name="pagina2" id="pagina2"></a>
    pagina 2
    </div>
    </div>
    
    
    

  • Super User

    Hai provato ad aggiungere overflow: hidden; anche alla classe .a1 ?


  • User Attivo

    Provato adesso, ma non va lo stesso :gtsad:


  • User Attivo

    Ho risolto!
    ho modificato questa riga in questo modo:

    $('html, div, body').stop().animate({

    Funziona tutto correttamente, solo che l'effetto vorrei averlo da sinistra verso destra, e mi sa che non è realizzabile, perché avendo il div principale con una larghezza fissa, il div1 automaticamente flotterà in basso, perdendo l'allinamento orizzontale, dico bene?


  • Super User

    @cla83 said:

    Ho risolto!
    ho modificato questa riga in questo modo:

    $('html, div, body').stop().animate({

    Ottimo

    @cla83 said:

    Funziona tutto correttamente, solo che l'effetto vorrei averlo da sinistra verso destra, e mi sa che non è realizzabile, perché avendo il div principale con una larghezza fissa, il div1 automaticamente flotterà in basso, perdendo l'allinamento orizzontale, dico bene?
    Perché? Non modificando le dimensioni non dovrebbe fare questo effetto.


  • User Attivo

    @ayrton2001 said:

    Ottimo

    Perché? Non modificando le dimensioni non dovrebbe fare questo effetto.

    Si però il problema è che se non dò una larghezza fissa al box principale (prima era l'altezza visto che doveva scorrere verticalemente) visualizzo tutto il contenuto delle pagine, invece io vorrei far scorrere le mini-pagine, chiamamole così, in quelle misure precise.

    Comunque i problemi sono due, anche perché se non dò la larghezza fissa al contenitore principale, l'effetto scroll non funzione, ho anche provato a cambiare questa riga di codice:

    da così:
    scrollTop: $(target).offset().top - 10

    a così:

    scrollLeft: $(target).offset().left - 10


  • Super User

    Purtroppo non riesco a capire bene il problema.
    Non so se fa al caso tuo, ma prova a guardare questo plugin: jQuery ScrollTo


  • User Attivo

    Si è proprio quello che cercavo! grazie mille Ayrton!


  • Super User

    Ottimo ;).