Detecter la fin de page scroll Jquery bouton revenir en haut

Le_Futuriste
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
Réponse acceptée

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
Réponse acceptée

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
Auteur

Merci pour vos réponses