11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire un scrolltop qui atteigne le header de la page

Bonjour,
J'ai un btn "scrolltop qui fait bien son "travail" : retourner en haut du site. Mais ce dernier ne fonctionne plus quand on passe par la barre des menus. Le btn ne fait plus que remonter en haut de la section, et non plus en haut du site.

Je vous laisse le code au cas où vous pourriez m'aider.

var btn = $('#remonte');

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    btn.addClass('show');
  } else {
    btn.removeClass('show');
  }
});

btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop:0}, '300');
  setTimeout( () => {
	  window.location=document.location.href
	 }, 400);
});


Merci beaucoup et bonne journée Smiley cligne
Modérateur
drphilgood a écrit :
salut
pour faire simple:

<a href="#">haut de page</a>


J'ai l'habitude de mettre un id sur l'élément <html> et ajouter un l'id dans le lien. 

<html id="top" lang="fr" ....>
 <!-- etc. -->
<a href="#top">Retour en haut de la page</a>
 <!-- etc. -->
</html>


Pourquoi proposer cette méthode ?
La méthode que tu suggères n'est pas une bonne pratique. D'un point de vue accessibilité, ton lien est vide.
Modifié par Niuxe (20 Jun 2025 - 12:06)
Modérateur
Bien sûr que ça fonctionne. Mais ce n'est pas accessible.
Les lecteurs d’écran (comme NVDA/JAWS) annoncent le lien comme un lien "vide" ou "ancre vide", ce qui est peu informatif.

Inspecte alsacreations.com et .fr Smiley cligne

D'ailleurs, je me pose la question dans le cas où c'est une ancre vide et qu'History le prenne bien en compte. Je pense que oui. Mais j'ai un doute.
Modifié par Niuxe (20 Jun 2025 - 15:35)
Bonjour Niuxe, bonjour drphilgood,
Merci pour vos réponses Smiley smile Je tente tout cela demain (je ne suis actuellement pas chez moi).
Je vous tiens au courant ASAP Smiley cligne
Merci encore.
Bonjour,
il me semble que si PLGPPUR a mis du JS, c'est afin d'avoir un effacement du bouton avant que l'on descende sur la page. Ce que ne font pas vos deux propositions. Ce petit bout d'html 
<a class="button-top" href="#" role="button" title="Retour haut de page">&#8593;</a>

Plus ce JavaScript
function showIt(){const toBeShown=document.querySelectorAll(".button-top);const halfScreen=window.innerHeight/1.6;toBeShown.forEach((item,i)=>{const scrolled=(window.scrollY+window.innerHeight);if(item.offsetTop-window.scrollY<halfScreen){item.classList.add('scrolled')}else{item.classList.remove('scrolled')}})}
window.addEventListener('scroll',showIt);

Enfin le css 
.button-top {
  	display:flex;
  	flex-wrap:nowrap;
  	position:fixed;  	
    	justify-content:center;
    	align-items:center;
  	top:26em;
  	width:2em;
  	height:2em;
  	left:95%;
  	z-index:9000;
  	transition:opacity 1.6s ease-in-out;
    	background:red;
  	border-radius:50%;
  	opacity:0;}
.button-top.scrolled {
	opacity:1;
	color:black;}
.button-top:focus{
  	outline: 0;
  	box-shadow: none;}

Font bien l'affaire.
Modifié par Bongota (20 Jun 2025 - 17:38)
Bonjour Bongota,
merci pour ton code. Le js servait à remonter en haut et rafraîchir la page.
Le sujet de "remonter" à top 0 est réglé, merci à vous Smiley smile
Par contre, je n'ai pas l'impression que la page se recharge (et cela est très important) Smiley ohwell
le js actuel est 
var btn = $('#remonte');
btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop:0}, '300');
  setTimeout( () => {
	  window.location=document.location.href
	 }, 400);
});


et le HTML
<a href="#mynavbartest" id="remonte" title="lien_top"></a>


Merci et bon week-end Smiley smile
Bonjour,

Merci pour ton message. Le comportement que tu décris est probablement lié au fonctionnement des ancres dans la barre de menu : lorsqu’un lien du menu pointe vers une section spécifique avec un #id, le navigateur considère déjà que tu es "en haut" de la page (de cette section), ce qui empêche parfois le bouton "scrolltop" de remonter complètement en haut du site.
Bonjour Kyliano,
je comprends mieux mais je ne vois pas comment contourner le problème. Avec js ?
Merci de ton aide et bonne journée Smiley cligne
Modérateur
Tu n'as pas résolu le souci. Pourtant que ce soit notre ami drphilgood ou moi avons donné une solution standard. Ce que j'ai pu lire en parcourant les message : Pourquoi veux tu que la page se recharge ? Je ne pense pas que ce soit une bonne idée
Modifié par Niuxe (01 Jul 2025 - 13:57)
Bonjour Niuxe,
merci pour ta réponse. Il faut absolument que le slider animé se relance dès que l'on retourne en haut. Je n'ai malheureusement pas le choix Smiley murf
Bonne journée Smiley cligne
Modérateur
Ce n'est pas une bonne idée de recharger la page. C'est même une très mauvaise pratique¹ (le même problème que meta refresh). Le mieux, tu détruis et tu reconstruis. As-tu une url à partager ou le code de ton slider ? Ce slider est fait maison ou est-ce une libriairie prise sur le net ?

Au passage, en lisant ça, c'est contre productif. Peut faire mieux

btn.on('click', function(e) {
  e.preventDefault();
  $('html, body').animate({scrollTop:0}, '300');
  setTimeout( () => {
	  window.location=document.location.href
	 }, 400);
});


Dans la signature de la méthode animate(), tu bénéficies d'un callback. Ce qui permet d'ajouter un comportement après que l'animation eut été lancée (onComplete). Ne pas oublier que cette méthode (animate) est gourmande en ressource. En général, il vaut mieux éviter de l'utiliser. Il est aussi préférable d'utiliser la méthode stop() afin d'éviter des bugs ou comportements aléatoires/exotiques.

Ça te donne ceci : 

btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').stop().animate({scrollTop:0}, 300, function(){
        window.location=document.location.href
    });
});

**Nous sommes en 2025 et je ne vois plus l'intérêt d'utiliser jQuery.
____
¹ Les rechargements de page sont une mauvaise pratique parce que:
- Tu peux nuire au SEO. Les moteurs de recherches n'aiment pas ce genre de comportement
- L'utilisateur peut être surpris et frustré.
- l'historique de navigation est faux
- Les lecteurs d’écran ou aides techniques peuvent être interrompus en pleine lecture si la page se recharge.
- Les utilisateurs avec troubles cognitifs ou moteurs peuvent perdre le fil de l’action en cours
- etc.
Modifié par Niuxe (01 Jul 2025 - 15:53)
Merci beaucoup Niuxe,
je te tiens au courant très vite Smiley smile
Pour le JQuery, c'est remplacé par ? Uniquement du js ?
Merci encore Smiley cligne
Modérateur
Je n'avais pas vu ta réponse. J'ai fait quelques modifs en ajoutant des arguments pertinents par rapport à ce que tu fais (le rechargement de la page).

jQuery est une bonne librairie. Cela dit, son intérêt n'est plus aussi intéressant. le vanilla JS (natif) est une solution plus adéquate.
Modifié par Niuxe (01 Jul 2025 - 16:07)
Merci beaucoup Niuxe,
je demandais à ce que la page soit rafraîchit car j'ai un gros souci avec le slider.
Puisque c'est à fuir, j'ai cherché ailleurs Smiley cligne
j'ai regardé la console (pour la première fois) et j'ai des messages d'erreur sur ce slider.
Mon problème (slider qui se bloque) vient peut-être de là Smiley ohwell ?? Smiley ohwell
J'ouvre un nouveau topic ce soir.
Merci pour ton aide et tes explications Smiley smile
Bonne soirée.
Prévenir un modérateur
Répondre au sujet
Aller à