Flèche pour remonter en haut de page se comporte bizarrement
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:
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:
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:
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
