18008 sujets

Questions générales et questions de débutants

[Résolu] Ancre / haut de page

Bonjour
J’essaie d’installer une ancre pour remonter en haut de page, après quelques tentatives infructueuses, je ne sais pas comment m’y prendre pour la positionner sur la page …
Je souhaiterai la mettre sur la version desktop en bas au-dessus du footer à l’extérieur du contenair et sur la version mobil en bas à l’intérieur du contenair.
Si vous avez des conseils ou une piste à m’indiquer, merci.
Le Site

Bonne journée
Modérateur
Bonjour Africa,

Justement récemment je suis tombé sur cet article de Css-Trick: How to Make an Unobtrusive Scroll-to-Top Button.

J'ai bien conscience que ça ne répond pas tout à fait à votre question sur le dedans/dehors de conteneur mais ça ouvre les perspectives.

Du coup, à cette lecture m'est venue l'idée selon laquelle pourquoi ne pas créer en html un simple bouton comme on en voit partout et s'appuyer sur cet article pour créer un tout nouvel élément qui enlèvera le bouton précédent créé en html pour injecter ce bouton en JS. Ainsi le premier sert de fallback au cas où le JS est désactivé alors que ce dernier devient bien plus malléable.

Qu'en pensez-vous ?
Hello, je te donne ma méthode, qui va je pense te simplifier la tâche Smiley lol

Donc, les éléments de base, l'ancre et le bouton:

<body>
<i id="topPage"></i>
<a id="anchorButton" href="#topPage"><img src="https://icon-library.com/images/10442_3746.png"/></a>

<!-- Suite de ta page -->


Ensuite tu positionne ton bouton normalement en 'top' & 'left'.

Maintenant et c'est là que ça devient sympa, on va afficher le bouton seulement si on n'est pas en haut de page en JS:

window.onscroll = function () {

	if ( document.body.scrollTop > 500  || document.documentElement.scrollTop > 500 ) {
		anchorButton.style.setProperty('visibility','visible');
	} else {
		anchorButton.style.setProperty('visibility','hidden');
	}

}


Reste plus qu'à placer scroll smooth pour le fun, ce qui donne pour le CSS complet de ma méthode:

#anchorButton { visibility: hidden; position: fixed; right: 30px; bottom: 30px; }
#anchorButton img { width: 40px; }
html { scroll-behavior: smooth; }


PS: Tu peux bien sur ajouter des média queries pour le placer différemment en mobile ou en desktop Smiley smile
Modifié par stryk (15 Oct 2020 - 11:45)
Merci a tous les 2 Smiley biggrin
Je vais prendre le temps de tester vos solutions notamment celle proposée par Greg.
Merci pour votre aide, j'ai réussi à installer cette ancre uniquement en css.
Sujet clos
Aller à