11549 sujets

JavaScript, DOM et API Web HTML5

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
Prévenir un modérateur
Répondre au sujet
Aller à