Anchor link

[cla83]

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>

[ayrton2001]

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.

[cla83]

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

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>

[ayrton2001]

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

[cla83]

Provato adesso, ma non va lo stesso

[cla83]

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?

[ayrton2001]

@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.

[cla83]

@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

[ayrton2001]

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

[cla83]

Si è proprio quello che cercavo! grazie mille Ayrton!

[ayrton2001]

Ottimo ;).