Discussion :

[d3LTa7]

Bonjour ! J'ai un petit souci avec ma flèche pour remonter en haut de l'écran que je n'avais pas avant... quand j'ouvre ma page et que je scroll vers le bas elle n'apparait pas. Elle reste en display: none, par contre si j'actualise ma page en étant au milieu de la page par exemple, elle apparait bien, sauf qu'elle ne disparait pas une fois que je suis en haut de page et donc reste en display: block... J'ai revu mon code concernant cette partie mais je comprend pas :
J'utilise Tailwind et Sass

index.php

Code html :

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

1
2
3
    <div id="arrow" class="arrow z-40 cursor-pointer">
        <svg width="50px" height="50px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>ionicons-v5-a</title><polyline points="112 244 256 100 400 244" style="fill:none;stroke:#9ca3af;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="256" y1="120" x2="256" y2="412" style="fill:none;stroke:#9ca3af;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
    </div>

script.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let posY = window.scrollY;
let btn = document.getElementById('arrow');
if (posY > 1000){
    btn.style.display = 'block';
}else{
    btn.style.display = 'none';
}
btn.addEventListener('click', ()=>{
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
    })
});

main.scss

Code :

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

1
2
3
4
5
.arrow{
    position: fixed;
    bottom: 2%;
    right: 2%;
}

Du coup je me demande si le problème ne viendrait pas d'autre chose... Vu que je travaille avec Tailwind, beaucoup de style css est réalisé sur l'index, on ajoute à cela un fichier scss et du js... est-ce un souci d'optimisation ? Je précise que je travail en locale avec Wamp. Qu'en pensez vous ? Merci

[darkstar123456]

Bonjour,


Vous n'avez pas d'événement "on scroll" dans votre javascript; donc le code s'exécute une seule fois seulement, au chargement évidemment

EDIT : Voici un Codepen avec quelques corrections : https://codepen.io/DarkStar123456/pen/ExXyRZw

Corrections :

1. J'ai tout mis dans une fonction comme ça on peut facilement exécuter le code au load et au scroll
2. Plutôt que de mettre une valeur fixe pour afficher la flèche, j'ai plutôt fait en sorte de l'afficher dès qu'on a scroller d'une hauteur de window if (window.scrollY > window.innerHeight){
3. Pour éviter un effet de clignotement de la flèche au chargement de la page, on ajoute style="display: none;" afin de la cacher par défaut, c'est le JS qui décidera quoi faire ensuite
4. Utilisation de la balise <button> plutôt que <div> car c'est quand même plus propre !

Le code :

Code javascript :

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
let btn = document.getElementById('arrow');
 
function goToTopArrow() {
  if (window.scrollY > window.innerHeight){
      btn.style.display = 'block';
  }else{
      btn.style.display = 'none';
  }
}
 
goToTopArrow();
window.addEventListener('scroll', goToTopArrow);
 
btn.addEventListener('click', ()=>{
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
    })
});

[d3LTa7]

Super ! Ça marche nickel ! Merci beaucoup !!