WebSite X5Help Center

 
Maximilien V.
Maximilien V.
User

Flèche haut de page  fr

Autor: Maximilien V.
Besucht 1981, Followers 1, Geteilt 0  

Bonjour à toutes et tous,

En cours de création d'un nouveau site, j'aimerais savoir comment faire pour intégrer une fleche de retour vers le haut de la page.

Je vous ai joint une image à toutes fins utiles. Le site qui m'inspire est connu, c'est celui de website ... :-)

Merci d'avance pour vos réponses.

Cordialement

Maximilien

Gepostet am
6 ANTWORTEN - 1 NüTZLICH - 1 KORREKT
JiPeR 48
JiPeR 48
Moderator

Re-Hello Maximillien,

La solution la plus simple consiste à mettre une petite image "flèche vers le haut" et d'y insérer tout simplement le lien de la page en question. En cliquant sur l'image on remonte tout en haut de la page du site. Voir ma copie écran jointe pour exemple.

Un anglais a trouvé un truc intéressant et l'a proposé en idée. Voir ici :

https://helpcenter.websitex5.com/post/114132   et aller sur la page dont est indiqué le lien. On voit les flèches en bas de la page, et elles permettent de monter et descendre... Mais je n'ai pas d'infos complémentaires pour créer la chose.

@+ et bonne continuation, J.P.

X
Mehr lesen
Gepostet am von JiPeR 48
S. Arnaud
S. Arnaud
User

Salut Jipé & Maximillien,

@Jipé : Le lien que tu donne pointe vers ce même post  (Edit J.P. : Oupssss... J'ai rectifié le tir. Merci... ;o)

Voici un post (peut-être le même, en anglais), qui permet d'inclure un bouton "scrollback"

en intégrant un script JSquery.

https://helpcenter.websitex5.com/post/107161

La manip' fonctionne à merveille (je l'utilise sur mon propre site).

Cordialement,

Arnaud

Mehr lesen
Gepostet am von S. Arnaud
Maximilien V.
Maximilien V.
User
Autor

Re,

Alors ... après un peu de recherches (je n'aime pas rester en plan) ... mais n'étant pas un pur informaticien :

1/ J'insère un code html :

<div id="hdp"> <a href="#"> <img src="http://"adresse de l'image" width="50 height="50 alt="Haut de page." title="Haut de page"> </a> </div>

2/ Je rajoute en code css :

div#hdp img { border:0; position:fixed; top:500px; right:25px; }

Ces codes sont à mettre sur chaque page du site. C'est peut-être le seul truc c****

En test, sous fire fox et chrome, ça m'a l'air pas mal du tout. Apparemment sous IE aussi.

Si quelqu'un a envie de tester à son tour ...

Cordialement

Maximilien

Mehr lesen
Gepostet am von Maximilien V.
Laurent D.
Laurent D.
User

Bonsoir Maximillien, et bonsoir J.P. et Arnaud, 

Personnellement, j'ai placé le code suivant au niveau de l'option 4 Statistiques, SEO et code, avant la balise de fermeture </HEAD> :

<script>
_jq(function() {
var elem = '<img onclick="return x5engine.utils.location(\\'\\')" id="IcmScrollToTop" alt="" style="cursor:pointer;position:fixed;bottom:15px;right:15px;display:none;z-index:102" src="data:image/png;base64,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" />';
_jq("body").append(elem);

_jq(window).scroll(function () {
if (_jq(window).scrollTop() > 100) {
_jq('#IcmScrollToTop').fadeIn();
} else if (_jq(window).scrollTop() < 50) {
_jq('#IcmScrollToTop').fadeOut();
}
});
});
</script>

Le résultat donne le même résulat que sur le site http://www.websitex5.com/fr/ sur l'ensemble des pages du site.

Je pense que cela correspond tout à fait à ton besoin, Maximillien

@+, Laurent.

Mehr lesen
Gepostet am von Laurent D.
Laurent D.
Laurent D.
User

Oups,

J'espère n'avoir pas fais de bêtise en publiant çà. Si tel est le cas, merci aux modérateurs de supprimer mon post et d'accepter toutes mes excuses.

Laurent.

Mehr lesen
Gepostet am von Laurent D.
Maximilien V.
Maximilien V.
User
Autor

Ah oui, effectivement c'est bien mieux.

Merci.

ps : dommage que cette fonction ne soit pas proposée en "automatique", ça donne quand même un bon look aux sites.

Maximilien

Mehr lesen
Gepostet am von Maximilien V.