Discussion :

[pierrot10]

Bonjour à tous,

J'ai cherché rapidement comment faire un bouton "UP" qui reste toujours en pas de page, à droite, quand cette page est déroulée vers le bas.

Cette page est une longue page du réglement de l'école. Il faut donc quand on click une section, le visteur soit dirgié plus bas, vers la bonne section. Et ce bouton "UP" , ramène le visiteur sur le menu des sections.

J'ai réussi à faire ceci ainsi

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
top {
	--offset: 200px; 
	position: sticky;
	bottom: 20px;
/*	margin-left:10px;*/ 
	place-self: end;
	margin-top: calc(100vh + var(--offset));
	display:inline-block;
	/* visual styling */
	width:45px;
	aspect-ratio:1;
	background:var(--violet);
	border-radius:10px;
	height: 40px;
}
.top:before {
	content:"";
	position:absolute;
	inset:30%;
	transform:translateY(20%) rotate(-45deg);
	border-top:5px solid #fff;
	border-right:5px solid #fff;
}

Ca fonction sauf que ceci me cause un petit problème

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-top: calc(100vh + var(--offset));

Ceci me permets d'avoir le bouton "UP", plus bas de manière ce quîl s'affiche lors que la page a été scrollée de 150px. Il rajoute donc un margin-top de 150px.

Le problème est que lorsque l'on est ne bas de page, le margin-top crée un espace vide gènant que je souhaiterais supprimer, ne pas avoir.

Pour mieux comprendre cet effet, voici la page en question http://8a488bgpye.preview.infomaniak...9glement.html#. Il vous suffit de cliquer sur le point 8 pour mieux comprendre.

Y-a-t-il un autre moyen pour que la flèche UP s'affiche après un certain déplacement vers le bas? (En CSS ou javascript)

Merci pour vos lumières

[NoSmoking]

Bonjour,
tu peux cet exemple pour le principe : Lien retour haut de la page