Ciao a tutti,
vorrei realizzare un effetto scroll come quello nel link
http://demos.flesler.com/jquery/scrollTo/
Praticamento volevo fare una pagina con un sistema di navigazione ad ancore con quell'effetto.
Mi potete aiutare?
mi basta anche un esempio dell'uso di quel plug-in (scrollTo)
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
nessun aiuto?
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
Che dire, l'esempio è già in quella pagina che ci hai linkato.. Se vuoi tempo fa io feci un sito con quella tecnica (ma usando mootools invece di jquery) per un amico. Se vuoi dargli un occhio sta qui
ma è tutto contenuto nella stessa pagina giusto? però lo scroll standard è bloccato...è un opzione del plugin?
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
-> Sìma è tutto contenuto nella stessa pagina giusto?
-> Ti do due dritte perché mi pare che nn hai tanto capito. C'è un div, delle dimensioni della finestra visibile, all'interno del quale scrolla un div più grosso (nel mio caso alto e largo il triplo). Il div #finstra avrà altezza e larghezza fisse, inoltre avrà l'attributo overflow:hidden; che nasconde le scrollbar e permette al contenuto di non essere visibile qualora sia più grosso del contenitore. (e nel nostro caso lo è). Una volta che hai creato la questa struttura saraà sufficiente chiamare scrollTo() di jQuery sulla tua #finestra dicendogli dove scrollare.però lo scroll standard è bloccato...è un opzione del plugin?
perfetto! ora ho capito grazie mille
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
un'ultima cosa applicata al mio caso però...
io devo fra scrollare tutta la pagina( non un div)da un <div> (di navigazione) ad un altro
esempio:
<div id="container">
<div id="nav">
<a onclick="javascript:vai('chisono')">chi sono</a>
<a onclick="javascript:vai('contatti')">contatti</a>
</div>
<div id="chisono">
</div>
<div id="contatti">
</div>
</div>
com'è che devo fare per far scrollare tutta la pagina
function vai(id)
{
$(document.window).scrollTo(id,duration:1000);
}
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
al limite, se ho capito cosa vuoi dire, ammesso che il tuo codice sia qcosa di questo tipo:
ma ricordati di dare overflow:hidden a body, e probabilmente position fixed al nav sennò ti si sposta pure lui.codice:<body> <div id="container"> <div id="nav"> <a onclick="javascript:vai('chisono')">chi sono</a> <a onclick="javascript:vai('contatti')">contatti</a> </div> <div id="chisono"> </div> <div id="contatti"> </div> </div> </body> com'è che devo fare per far scrollare tutta la pagina function vai(id) { $('container').scrollTo(id,duration:1000); }
Questo è il codice non funzionantecodice:<html> <head> <style> body { margin: 0; text-align: center; } #container { padding: 5; margin: 0 auto; text-align: left; border: 1px solid black; width: 800px; height: 2000px; } #nav { margin: 0 auto; width: 600px; height: 500px; text-align: left; border: 1px solid black; } #chisono { margin-left: auto; margin-right: auto; width: 600px; height: 500px; text-align: left; border: 1px solid black; } #contatti { margin-left: auto; margin-right: auto; width: 600px; height: 500px; text-align: left; border: 1px solid black; } </style> <script type="text/javascript" src="jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"</script> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> function vai(id) { $('container').scrollTo(id,duration:1000); } </script> </head> <body> <div id="container"> <div id="nav"> chi sono contatti </div> <div id="chisono"> chisono </div> <div id="contatti"> contatti </div> </div> </body>
penso avrai capito che voglio far scrollare il body e non il container e poi non importa se si vede lo scroller del documento
vorrei solo che scrollasse al div più sotto senza utilizzare lo scroller perchè la pagina che ho in mente di costruire è molto lunga...
grazie dell'aiuto che mi stai dando!
P.S. come hai visto nel codice ho due plug-in per lo scroll e non so quale usare....
"L'esperienza è il tipo di insegnante più difficile. Prima ti fa l'esame, poi ti spiega la lezione".
Oscar Wilde
ci son diversi errori, siccome mi sento magnanimo (più che altro mi è passata la voglia di studiare) te l'ho corretto qui.
Ti dico comunque quello che non va:
1-jQuery va caricato PRIMA del plugin;
2-Basta un plugin, ho usato scrollTo() io;
3-id non è semplicemente una stringa, è un oggetto del dom e quindi devi usare il selezionatore di jquery $();
4-javascript va scritto tutto attaccato;
Se nn capisci qualcosa chiedi pure. ciao.
Permessi di invio
Rispondi quotando