Fonctionnement de scrollTo pour tous les browser à finaliser
Bonjour,
Débutant en JavaScript, j'ai pris des informations sur w3scools.com et sur developer.mozilla.org
Je suis en train de travailler sur un site pour le rendre mobil freendly
Je voulais mettre un bouton en haut de l'écran qui permette de revenir au menu sans devoir utiliser le défilement des pages
Je travaille avec firefox developer et tout fonctionne bien en vue adaptive mais un test sur un windows phone ne fut pas concluant
Le bouton est apparu mais est resté collé sur le haut de la page et pas en haut de l'écran donc il disparaît lors du défilement et un clic dessus ne fait que le faire disparaître.
Mon code est simpliste mais j'aimerai que vous m'aidiez à l'améliorer et surtout le faire fonctionner sur tous les mobiles
précision: le site est fait sous joomla 3.5 avec un template ol_albos
pour voir le comportement, le site est entrepreneur-varois.fr
Code css pour le bouton :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
#backMenu {
position: fixed;
top: 0;
background-image: url(../images/lev_ico.png);
background-color: #085296;
background-repeat: no-repeat;
background-position: 10px 5px;
width: 100%;
height: 34px;
color: #FFA !important;
font-family: "arial black" !important;
font-size: 14pt;
letter-spacing: 0.2em;
text-align: center;
} |
code html dans index.php
Code:
<button id="backMenu" style="display:none" onclick="top_lev()">menus</button>
code js avec une fonction callback pour l'affichage ou non du bouton et une fonction pour le retour en début de page
le code est écrit en fin de document avant </body>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| script type="text/javascript">
var view_menu = "none";
window.addEventListener("scroll", function(e){
if(window.scrollY > 100){
view_menu = "block";
}else{
view_menu = "none";
}
document.getElementById("backMenu").style.display = view_menu;
});
function top_lev(){
window.scrollTo(0,0);
}
</script> |
Autre question : pourquoi function(e) ? A quoi sert le "e" dans la fonction anonyme
