Salve a tutti sto realizzando un sito che contiene tutte le info (testo ed immagini) in un unico div...ora vorrei applicare un effetto che consente, tramite il click su dei pulsanti in alto, di far scorrere questo div principale, lascio il link ad un sito così da permettere a tutti di capire quello che cerco
http://www.iamrakesh.com/
Questo è il link cliccando sui tasti in alto potete notare l'effetto di scroller che vorrei.
Attendo vostre risposte, grazie
ti bastava guardare il codice sorgente, o fare un ricerca su google per risolvere, cmq questo è il codice che usa il sito in questione:
codice:$(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); });
ok, si quella parte di codice l'avevo notata, però non avrei bisogno di un file js da implementare all'interno delle cartelle che contengono i vari file del sito?
Inoltre vorrei sapere come associare questa funzione ad ogni singolo pulsante...grazie ancora dei suggerimenti
devi solo includere jquery, par applicare la funzione ai pulsanti di basta valorizzare il parametro class con "scroll"
Beh in realtà implementando quella parte di codice all'interno del mio codice html, tag head, mi scompare tutto...potresti essere più preciso nella spiegazione? grazie...
ma hai provato a cercare in rete? il primo che ho trovato http://beski.wordpress.com/2009/04/2...nchors-jquery/
questo esempio che m'hai lasciato mi confonde ancora di più, tieni presente che io sto iniziando da poco ad approcciare con jquery e js
posta il codice della tua pagina allora, la parte che contiene le ancore e i link ...
codice:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Marco Iannaccone</title> <link href="conteiner.css" rel="stylesheet" type="text/css" /> <link href="footer.css" rel="stylesheet" type="text/css" /> <link href="menu.css" rel="stylesheet" type="text/css" /> </head> <body background="pattern-sito.jpg"> <div class="menu"> <div class="logoheader"></div> <div class="aboutbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">About</span></div> <div class="workbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Work</span></div> <div class="contactbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Contacts</span></div> </div> <div class="container">
Ecco questo è il codice fino al div contenitore che voglio che si muova ( all'interno del div container ci sono altri div che contengono i testi e le immagine del sito)
I tasti in alto sono tre "About" - "Work" - "Contact" su ognuno di questi contatti ho creato un effetto di rollover tramite css (giusto per informarti)
Da questo punto non riesco ad inserire quella funzione jquery che mi permette di far scendere giu il div "container" quando premo ad esempio sul tasto "work"
se non mi sono espresso bene, ditemelo e cercherò di farmi capire meglio, grazie ancora
codice:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Marco Iannaccone</title> <link href="conteiner.css" rel="stylesheet" type="text/css" /> <link href="footer.css" rel="stylesheet" type="text/css" /> <link href="menu.css" rel="stylesheet" type="text/css" /> </head> <body background="pattern-sito.jpg"> <div class="menu"> <div class="logoheader"> </div> <div class="aboutbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">About</span></div> <div class="workbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Work</span></div> <div class="contactbtn"><span style="font-family:'Coolvetica Rg'; font-size:20px; text-align:center;">Contacts</span></div> </div> <div class="container">
Scusatemi forse così rende meglio la leggibilità
Permessi di invio
Rispondi quotando