1

Discussione: Flèches pour aller en haut de la page

Bonsoir
Je voudrais mettre dans la marge de mon adHoc une petites flèches pour aller en haut de la page. Comment fait-on ?
pour l'instant j'ai résolu en insérant dans les pages créées le code suivant:

<style>
#miopulsante {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
}
#miopulsante:hover {
  background-color: #555;
}
</style>
<button onclick="topFunction()" id="miopulsante" title="Go to top" style="display: block;">▲</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        document.getElementById("miopulsante").style.display = "block";
    } else {
        document.getElementById("miopulsante").style.display = "none";
    }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

mais est possible de le mettre dans le fichier skin.css de la skin pour l'avoir automatiquement sur toutes les pages?
Merci d'avance de le reponce

Valdo ( Wald23)

2

Re: Flèches pour aller en haut de la page

Ciao Valdo

benvenuto nel forum

questa opzione è prevista di default in un sito adHoc, ma una regressione nel codice l'ha resa non funzionante.
Faccio un controllo e ti aggiorno.

A presto

3

Re: Flèches pour aller en haut de la page

Dunque, funziona tutto, ma nelle ultime versioni lo stile per la freccia è sparito dal tema di default.

Per renderlo visibile aggiungi questo codice al file css del tuo tema (diciamo verso la fine, prima del codice relativo alla sezione mobile)

/* goTop Link */
.goTop {text-align: center;text-decoration: none;position: fixed;bottom: 10%;right: 40px;display: none; border: solid 3px #3373ad;padding: 10px;font-weight: bold;line-height: 1.5em;font-size: 1em;}
.goTop::after {content: "\2227";font-size: 2rem;font-weight: bold;color: #3373ad;}
.goTop:hover {box-shadow: 5px 5px 20px #aaa;}

e la freccia dovrebbe tornare visibile. Ci sarà poi da sistemare il colore o la grandezza secondo il tema del tuo sito.

Guarda anche sul mio sito per avere un esempio.

Ciao

4

Re: Flèches pour aller en haut de la page

Ok Grazie Ale

5

Re: Flèches pour aller en haut de la page

Ok Ale funziona perfettamente o anche modificato, per prova la content: "\2227", inserendo un immagine e tutto funge.

Volendo fare l'inverso per andare in alto basta modificare tutta la parte .goTop  in .goDown o questa funzione è chiamata in altro modo.

Grazie

6

Re: Flèches pour aller en haut de la page

il codice esistente serve solo per la freccia in su... è stato inserito quasi a titolo sperimentale in seguito ad una richiesta sul forum.
Per migliorare il tutto ci vorrebbe un modulo o un'estensione.

Stiamo a vedere, magari arriva prima o poi...