Inserire un tasto alla pagina web per tornare in cima
Autor: Luigi G.
Visited 2260,
Followers 2,
Udostępniony 0
Ciao, vorrei aggiungere al mio sito un tasto (o icona) che scorra insieme alla pagina (sul lato destro) facendo in modo che quando ci clicchi sopra ti riporta in cima alla stessa pagina.
per intenderci (allego una foto) come quando fai una ricerca su ebay quando scorri la pagina verso il basso ti esce una freccetta che cliccandola ti riporta in cima.
Come posso fare???
Grazie mille per l'aiuto!
Posted on the
qui trovi esempio e download:
http://mattvarone.com/web-design/uitotop-jquery-plugin/
Puoi anche inserire l'immagine allegata al passo 4 > codice > esperto > Aggiungi file > percorso: images;
poi inserisci al passo 4 > codice > esperto questo script:
<style>
#imFooter {
position: fixed !important;
bottom: 0 !important;
z-index: 10 !important;
}
</style>
quindi inserisci nel footer un oggetto html con dentro:
<a onclick="return x5engine.utils.location('#', null, false)" href="#">
<img width="50" height="50" src="../images/back-to-top.png">
</a>
se ti fa comodo in aggiunta puoi anche settare lo sfondo del footer trasparente (se il bottone di ritorno é l'unico contenuto)
Autor
Ok innanzitutto grazie mille per l'aiuto...poi volevo chiedere a Mirko una volta scaricato http://mattvarone.com/web-design/uitotop-jquery-plugin/ e "zippato" va messo solo nella cartella pubblicata del sito oppure oltre ad essere pubblicato deve essere anche implementato un codice all'interno del sito tramite il "passo4-codice-esperto?"
per info: Ho provato a pubblicare le cartelle scaricate ovviamente tranne la pagina "index" ma non funziona.
Per Fabio: grazie mille per la tua soluzione ma non mi piace molto l'effetto del footer sempre in primo piano e non posso farlo trasparente poichè ci sono già dei contenuti.
puoi anche inserire quello script html in una cella html invece che nel footer (dopo un'altra cella o solo a fondo pagina) dando l'altezza di 50px (oppure una immagine più piccola e quindi un'altezza cella uguale azzerando margine e padding della cella); poi fa come preferisci; se preferisci integrare nel tuo progetto risorse esterne al programma...
Autor
Ci sono arrivato!!! Nel caso serva a qualcuno la risposta alla mia domanda è:
Si bisogna inserire al "passo4-codice-esperto" il seguente codice (prima della chiusura del tag HEAD)
<meta charset="utf-8"/>
<title>UItoTop jQuery Plugin - Matt Varone</title>
<meta name="author" content="www.mattvarone.com">
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<!-- jquery -->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Se qualcuno vuole aggiungere qualcosa per migliorare o correggere il mio commento fate pure...potrebbe servire anche a me
Autor
mmm...Fabio effettivamente anche questa potrebbe essere un'ottima soluzione (non ci avevo pensato).
La testerò comunque così da poter avere più scelte a mia disposizione...Grazie
...prego!
puoi anche fare lo stesso lavoro usando l'oggetto immagine con lo stesso link, invece che un oggetto codice
@Luigi elimina queste righe:
<meta charset="utf-8"/>
<title>UItoTop jQuery Plugin - Matt Varone</title>
<meta name="author" content="www.mattvarone.com"> <meta name="viewport" content="width=device-width; initial-scale=1"/>
<!-- jquery -->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
... non posso valutare il tuo codice perchè non ho il Programma, ma segui il consiglio di MirKo, perchè quello che ti ha segnalato è superfluo essendo stringhe già gestite dal Programma...
... ... però in aggiunta potrebbe interessarti riuscire a fare tutto da te, senza codici esterni, se non con il solito DIV_CUSTOM:
... come idea vedi i miei esempi postati in altri Argomenti simili:
http://www.zspace.it/kolasim/div_custom/divcustomAngoloK_3.html
http://www.zspace.it/kolasim/div_custom/divcustomAngoloK_3scroll.html
... basta che fai il copia/incolla dello SCRIPT (2°es.) in HEAD e del DIV_CUSTOM nel BODY (/BODY), e ti funzionerà subito anche in Anteprima anche se come detto non posso verificare...
.
ciao