Problema con freccia che rimanda inizio pagina
Autore: VINCENZO A.Ciao a tutti,ho riscontrato un problema,spero che qualcuno possa aiutarmi.
Ho inserito uno script con una freccia che ti rimanda ad inizio pagina,che ti segue nella navigazione,non è necessario andare in fondo alla pagina per intenderci.
Dunque nell'anteprima del programma,io uso la versione 10 professional,va tutto bene,quando faccio l'anteprima nel browser,o comunque quando lo lancio on-line,la freccia non si vede più.
Ho inserito lo script prima della chiusura del tag body,in verità ho provato a inserirlo ovunque ma sempre con lo stesso risultato.
di seguito lo script creato:
<div id="freccia" style="display: none; position:fixed; right:50px; bottom:100px;">
<a href="[removed]scrolla();">
<img src="http://www.dsmodellismo.it/frecciaSu.gif" width="70" height="70">
</a>
</div>
<script type="text/javascript">
// la funzione scrolla viene attivata ogni volta che cliccano la freccia
function scrolla () {
if (document.body.scrollTop >= 1) {
document.body.scrollTop += -150;
setTimeout("scrolla()",40);
}
freccia = document.getElementById('freccia');
}
// questo evento si attiva ogni volta che in qualche modo la pagina va 'su o giù'
window.onscroll = scroll;
function scroll() {
if (document.body.scrollTop > window.innerHeight) colora();
else scolora();
}
// queste sono le due funzioni che vengono richiamate appunto per colorare e per scolorare (far sparire) la freccia.
function scolora () {
freccia.style.display = 'none';
}
function colora () {
freccia.style.display = '';
}
</script>
Spero che qualcuno possa aiutarmi.
grazie
Lo script che hai postato dà diversi problemi in più di un browser.
Ho provato ad "aggiustarlo" sostituendo le proprietà javascript con metodi di jquery e sembra funzionare meglio: http://stesil.altervista.org/evo10pro/scroll/index.html
Se apri il sorgente troverai in head il codice modificato.
Tieni presente che in rete puoi trovare script più recenti. Qui un esempio integrato in evo9: http://www.unofficialwsx5.com/index.php?topic=834.msg5911#msg5911
Autore
Grandissima Silvana,ora funziona perfettamente.
grazie mille
Autore
Silvana giusto per sapere,il secondo esempio come faccio ad inserirlo con website?
Ho scaricato il file zippato ma non so proprio come fare ad inserire tutti gli script e farli funzionare con il programma.
grazie
Scrivere codici qui è un'avventura
Ho scritto due righe di spiegazioni sul forum, spero possano bastare: http://www.unofficialwsx5.com/index.php?topic=834.msg11695#msg11695
Autore
Ti sembrerà strano ma ho provato e non funziona......che cippa che sono
Autore
Riprovato e funziona.
non avevo capito un passaggio........scusa ma volendo aumentare la velocità di andare ad inizio pagina come si può fare?
senza rifare lo script ovviamente
grazie sei gentilissima
C'è un parametro - scrollSpeed - che è impostato di default a 1200 (lo vedi nel codice commentato in body) e dovrebbe essere il tempo in millisecondi per tornare a inizio pagina.
Puoi diminuirne il valore inserendo il parametro quando richiami la funzione ( ... sperando che answers non stravolga il codice ...):
Autore
Ok,allora cambiando solo il numero in body non succede niente,allora ho aperto il file jquery.ui.totop.js con notepad e ho cambiato il numero di scrollspeed si dentro il codice (ho messo 10) sia nella stringa in body e funziona benissimo.
Per mettere un'immagine che voglio io dici che posso fare la stessa cosa?
grazie
Sicuro di aver inserito il nuovo parametro come nel codice che ho postato? Non è che hai cambiato il valore 1200 del commento?
Per l'immagine sostituisci quella del plugin con una con lo stesso nome nella stessa cartella.
Autore
il codice che hai postato non l'ho trovato in body,io ho questa cosa qui:
<!-- 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: 10,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Tu hai modificato il commento!
E' questa la riga di codice che devi modificare come ti ho scritto prima:
Autore
Ah ok devo proprio aggiungere il dato scrollspeed
Scusami non avevo capito io cercavo tutta la riga.
Poi ho provato a modificare l'immagine,ma mi fa uno strano effetto di sovrapposizione
grazie
ciao
Tieni conto delle dimensioni dell'immagine originale (che ne contiene due, stato normale e stato hover) altrimenti devi modificare il css.
Ho provato con l'immagine (del pifferaio) che ti allego e funziona.