[Résolu] Positionner fleche de navigation par css

Bon jour tous

Pourriez-vous vous m'aider à résoudre ce petit casse-tête... Je cherche à placer un icone (flèche vers le haut, type 'fontawesome') sur le bord droit de l'écran et à, disons, 100 px du bas de la fenêtre.
Cet icone sera un lien qui doit renvoyer vers le haut de la page.
J'ai développé un thème WP responsive (déjà en exploitation) et je tourne en rond avec ce positionnement.

Modifié : j'ai oublié de préciser que je ne voudrais que cette flèche n'apparaisse que si le scrolltop est de 500px environ

Merci d'avance
PascalG
Modifié par grassel (18 Dec 2018 - 14:01)

Bonjour,

le code ci-dessous fonctionne parfaitement sur l'un de mes sites en construction. Chez moi, le bouton n'est actif que sur la version smartphones et il est à gauche. Je viens d'effectuer un test avec margin-left:90%; et il reste toujours à droite, quel que soit la largeur de l'écran. Tout ça est sans doute perfectible, je n'ai que deux années de pratique css/html, mais ça fonctionne et c'est une base, que d'autres vont sans doute t'aider à perfectionner ou rationaliser.

html :

<a class="bouton" href="#">&#8593;</a><br>

css :

.bouton{
color: #ff6347; /* couleur du texte */
cursor:pointer; /* apparence du curseur */
display: inline-block;
border: solid 4px black; /* applique une bordure noire */
padding: 5px; /* espace entre la bordure et le texte */
margin-left:1em;
}

Chez moi, je l'ai placé verticalement là où je veux qu'il soit, dans le html.
Par contre, je ne comprends pas ta question sur scrolltop de 500px ?
ps: et toujours cette coloration syntaxique qui ne fonctionne pas.

Merci pour ta réponse Bongota

Ma question manque vraiment de précision désolé :
Je voudrais que ma flèche n'apparaisse que lorsque le visiteur aura scrollé vers le bas d'environ 500px (à faire varier selon hauteur de la fenêtre/écran) car inutile si on est encore en haut de page.
Pour l'heure voici ce qui est en place:

  <a id="haut" href="#">  <div id="retour">  </div>  </a>

#retour {background:url(img/Icone-retour.png) no-repeat;  background-size: contain; position:fixed; bottom:100px; right:0px; z-index: 100; margin-right: -60px; width:100px; height: 50px; background-size: contain;}
#retour:hover {margin-right: -30px;transition:0.7s;}

J'utilise ID="haut" pour faire un animate 'slow' pour le retour :

  // scroll vers haut de page depuis flèche du coté
  $('#haut').click(function(e){
    $('html, body').animate({scrollTop:0}, 1500);
    e.preventDefault();
});

J'espère que c'est plus clair maintenant

PascalG

Je comprends. Sur mes pages, je n'ai pas raisonné en termes de pixels pour placer mes flèches, mais elles sont là où j'ai décidé de les mettre, dans le html (c'est peut-être mal). La raison, c'est que sur l'un de mes sites, j'ai des pages longues où il y a deux flèches. Sur une autre page, le texte est très court et il n'y a pas de flèche, inutile.
Le mieux serait peut-être de positionner la flèche en "fixed", de façon à ce qu'elle se promènes partout, et qu'on l'utilise non pas parce qu'on la trouve sur notre chemin, mais parce qu'on a envie de remonter en haut à cet endroit. Je pense que si tu lui met un peu d'opacité, la flèche ne dérangera pas, toujours présente sur la page.
Et si on regardait comment font les gros sites ?
J'aime bien l'idée d'un retour en douceur, je vais le piquer.

<div class="coloration">

La coloration fonctionne de nouveau, c'était à cause de NoScript, mal paramétré pour alsacreations.

Comme tu le vois, j'ai effectivement mis en 'fixed'

Cela dit, je tiens à ne faire apparaitre la flèche que si scroll vers le bas.

Je suppose qu'il suffit de faire un test sur la valeur de ce scroll en javascript et de passer de 'hidden' en 'visible'...mais voilà comment faire !!!

salut,
tu peut utiliser l'évènement scroll et les propriétés windows.innerHeight et window.pageYOffset (ou scrollY).

Je viens de mettre ma flèche en fixed, belle amélioration. Ce qui prouve que les discutions pour lesquelles on ne semblait pas concerné au départ peuvent déclencher des idées qui dormaient.
Tu as aussi remarqué dans mon code que j'utilise une flèche en ASCII (&#8593;), ce qui est quand même beaucoup plus économique en poids qu'une icône.
Un "background:transparent;" améliore encore les choses quand la flèche arrive sur du texte. Mais puisque tu ne veux pas de flèche en dehors du scrooll.
Je serai curieux de la résolution de ton problème. Ces flèches de retour en haut de page améliorent considérablement la navigation, surtout sur les portables.

Hello tous
>>Zelalsan
Merci pour tes indications, voici le code, si tu as des remarques, j'espère que ce n'est pas trop "tordu" :

  // affiche bouton retour-haut fonction position de scroll
  $(window).scroll(function() {
    var Hscroll = $(this).scrollTop();
    if( Hscroll > 400 ) {
      $('.haut').css({opacity : 1});
    } else {
      $('.haut').css({opacity : 0});
    }
    var opScroll = Hscroll / 150; // fait apparaitre progressivement retour-haut fct de la hauteur de scroll de la page
    $('.haut').css({ opacity : 0 + opScroll });
  });

Modifié par grassel (19 Dec 2018 - 09:56)

Cette solution est opérationnelle, je marque donc le post en "résolu".