Bonjour, cela doit être très banal, mais mon bouton tel que calé en bas a droite pour revenir en haut de page me va très bien, je voudrai juste le perfectionné en le rendant visible que lorsque je scroll et bien sur lorsque je remonte avec ou sans le bouton il disparait etc...
actuellement il est ainsi

<style>
div.scrollUp
{
position: fixed;
bottom : 10px;
right: 60px;
// opacity: 0.5;
z-index:60;
}
</style>

<div class="scrollUp">
<a href='#'><img src='zzz/haut.png' /></a>
</div>


Merci d'avance
Modifié par Jean-Pierre-Bruneau (09 Oct 2019 - 12:49)
jQuery(document).ready(function() { 
    fadeMenuWrap(); 
    jQuery(window).scroll(fadeMenuWrap);
});

function fadeMenuWrap() { 
    var scrollPos = window.pageYOffset || document.documentElement.scrollTop; 
    if (scrollPos > 300) { 
        jQuery('div.scrollUp').fadeIn(300); 
    } else { 
        jQuery('div.scrollUp').fadeOut(300); 
    } 
} 
JENCAL a écrit :

Mon Ami merci, mais je ne vais pas sur mes 50 sites ou j'introduit cette ressource me mettre un JSON , je suis un Pro (a la retraite OK un peut vieux OK) ,mais tu ne trouvera jamais dans mes codes un paquet pareil pour afficher ou cacher un bouton.
Je sais pour avoir 6 enfants dont 3 chefs de service informatique .. Hiii .... ils ont suivi le père, ils utilisent des usines à gaz .... on y peut rien.
Donc sans doute un bout de Javascript sera peut-étre la réponse mais pas en JSON, "a la main a l'ancienne"
Merci à toi d'avoir répondu et d’être si présent ici à aider les demandeurs Smiley cligne
Modifié par Jean-Pierre-Bruneau (09 Oct 2019 - 17:51)
Bonjour,
je trouve ça dans mes fichiers. Je n'ai jamais testé, ce sont des bouts de code que je mets en mémoire quand je les vois passer, au cas où un jour j'en aurai besoin. Si ça peut t'aider.

// affiche bouton retour-haut fonction position de scroll
  $(window).scroll(function() {
    var Hscroll = $(this).scrollTop();
    if( Hscroll > 400 ) {
      $('.haut').css({opacity : 1});
    } else {
      $('.haut').css({opacity : 0});
    }
    var opScroll = Hscroll / 150; // fait apparaître progressivement retour-haut fct de la hauteur de scroll de la page
    $('.haut').css({ opacity : 0 + opScroll });
  });
En fait a l'ancienne , mais en HTML5 Smiley smile
ça donne

<!DOCTYPE html><html lang="fr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<head>
    <script type="text/javascript">
        function OnScrollDiv (div) {
            var info = document.getElementById ("info");
            info.innerHTML = "Horizontal: " + div.scrollLeft
                            + "px<br/>Vertical: " + div.scrollTop + "px";
        }
    </script>
</head>
<body>
    <div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
        <div style="height:300px; width:2000px; background-color:#a08080;"></div>
        Please scroll this field!
    </div>
    <br /><br />
    Current scroll amounts:
    <div id="info"></div>
</body>


Merci d'avoir participé
Modifié par Jean-Pierre-Bruneau (09 Oct 2019 - 19:59)
Pour info, ta déclaration de jeu de caractères :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

est dépréciée en HTML5 au profit de :
<meta charset="UTF-8">
Meilleure solution