Detecter la fin de page scroll Jquery bouton revenir en haut

Par Le_Futuriste, il y a 9 ans

Javascript

Bonjour,

J'ai un problème avec mon code Jquery. Etant débutant dans le domaine du Jquery.

Je cherche à faire un bouton pour revenir vers le haut de page qui apparait à un certain niveau de scroll et qui s'applique un propriété css à en fin de page (à cause du footer).
J'ai réussi à ce que le bouton apparaise à un certain niveau de scroll.
Mais je veux que, une fois arrivé en fin de page le bouton soit elevé dans sa position original afin de ne pas géner la lecture du footer.

En claire : comment faire pour que le bouton "revenir en haut de page" prenne une methode lorsque on est en fin de page ?

Voici le code Jquery.

//Page top $(document).ready(function(){ /* Java Script page top function */ $('body').append('<a href="#top" class="top_link" title="Revenir en haut de page"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>'); $('.top_link').css({ 'position' : 'fixed', 'right' : '20px', 'color' : '#9e9e9e', 'background' : '#eeeeee', 'bottom' : '20px', 'display' : 'none', 'padding' : '15px', 'padding-top' : '10px', 'padding-bottom' : '10px', 'font-size' : '1.5em', 'opacity' : '0.9', 'z-index' : '200' }); $(window).scroll(function(){ posScroll = $(document).scrollTop(); //ici je fait une condition pour que le bouton appraise après avoir scroolé une fois. if(prosScroll >= 20) $('.top_link').fadeIn(600); else $('.top_link').fadeOut(600); }); });

Je veux que la classe .top_linkprenne bottom:85px en css lorsque j'atteint la fin de la page.
J'ai essayé de rajouter une condition mais je ne sais pas comment définir la fin d'une page.

PS: ce script à été prit d'une page web.

Merci de votre aide :)

3 réponses

Ekim Kael, il y a 9 ans

Pour connaitre la taille de la page en JS essaie document.body.clientHeight
Après tu n'auras qu'a détecté quand le document.scrollY = (la hauteur du document - la hauteur du footer)

betaWeb, il y a 9 ans

Salut,

Tu ne fais pas cela de la bonne façon. Ce qu'il convient de faire c'est de mettre ton bouton dans ton conteneur princial (HTML), de le cacher via un display: none, puis de l'afficher au moment opportun.

HTML :

<body> <!-- Ici ton HTML --> <div data-js="back-top" class="back-top"></div> </body>

CSS (c'est juste pour l'exemple, libre à toi de le styliser comme bon te semblera) :

.back-top { display: none; position: fixed; bottom: 80px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: red; }

JS (non testé, à toi de bidouiller ;) ) :

(function ($) { var $backTop = $('[data-js="back-top"]'), posScroll = 0; function scrollToTop () { posScroll = $(document).scrollTop(); if (posScroll >= 550) { $backTop.fadeIn(); } else { $backTop.fadeOut(); } } scrollToTop(); $(window).scroll(scrollToTop); })(jQuery);
Le_Futuriste, il y a 9 ans

Merci pour vos réponses