addons ScrollTop | Remonter ses pages automatiquement

[Ubrain 30]

Salut la commu !

Je ne vous ai pas trop manqué (non)

 

Bon je reviens avec un petit plugin :

Un bouton animé en JQuery pour remonter en haut de sa page.

Je sais que ce fameux bouton (aussi présent sur inshare) à perdu de sa popularité ces derniers temps.

Mais pour ceux qui veulent encore utiliser ces petits boutons, j'en ai codé un plugin pour vous !

 

Prévisualisation :

Pour avoir accès à cette image, merci de vous connecter.

 

Donc vous pouvez voir qu'il est un poil plus animé que celui d'habbo Dev.
Pour commencer, comme ce plugin utilise JQuery, vous allez devoir relier JQuery à votre page, pour cela, je vous recommande de copier/coller dans le head ce code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

Dès que vous aurez fait cela, votre page sera "relié" à JQuery et sera prêt à l'utiliser.

Cette étape faite, on va devoir relier le plugin en JS avec ce code :

<!-- Si les deux fichiers se trouvent dans le meme repertoire -->
<script src="winscroll.js"></script>

<!-- Si les deux fichiers se trouvent dans un repertoire différent -->
<script src="repertoire/winscroll.js"></script>

 

Mais avant tout, vous devez télécharger le fichier en cliquant ici -> winscroll.js ou vous pouvez copier/coller le code complet qui se trouve un peu plus bas.

Dès que cela est fait, il ne se passera rien, parce qu'il faut créer la balise <scroll></scroll> (moi et mon amour pour la création de balises)

Mais il y a des paramètres spécifiques :

<scroll fixed="true" top="0">Remonter</scroll>
<!-- Ceci créra un bouton en haut de la page, l'animation ne fonctionnera pas -->

<scroll>Remonter</scroll>
<!-- Ceci créra un texte, si ce dernier est cliqué, la page sera remontée, l'animation ne fnctionne pas -->

<scroll fixed="true" bottom="0">Remonter</scroll>
<!-- Ceci créra un bouton en bas et l'animation fonctionne ! -->

<scroll fixed="true" bottom="12px" right="12px">Remonter</scroll>
<!-- Ceci créra un bouton à 12px du bas de la page à droite avec 12px vers la gauche, l'animation fonctionne aussi -->
<!-- Vous pouvez aussi bien évidemment faire ceci : -->
<scroll style="position:fixed;bottom:12px;right:12px;">Remonter</scroll>
<!-- Ceci rend le meme résultat mais je trouve cela un peu plus long -->

Donc en gros, dans la balise scroll, vous pouvez mettre ce que vous souhaitez, que ce soit du texte ou autre, si l'utilisateur le clique, ça remontera la page.

Et remarquez aussi que l'animation fonctionne que lorsque le bouton utilise bottom, c'est juste que faire 5 animations risquerait de faire un peu long et ralentirais vos pages.
 

Sur la vidéo plus haut, j'utilise ce code :

<scroll fixed="true" bottom="22px" right="15px">
  <!-- Vous pouvez insérer dans cette balise ce que vous voulez -->
  <img src="https://cnlovesdigital.com/wp-content/uploads/2016/04/back-to-top-button.png" style="width:70px;">
  <!-- Par exemple, j'ai mis cette image de fleche vers le haut -->
</scroll>

Ce code donnera donc le résultat suivant : 

Pour avoir accès à cette image, merci de vous connecter.

 

Pour ceux qui veulent juste copier/coller le code (ou juste le voir), le voici :

Révélation

/*******************************
* TopScroll codé par UBrainDev *
********************************/

// On créer la flèche dans la balise <scroll>
setarrow();

function setarrow() {
    // On vérifie si la balise existe
    var scroll_balise = document.getElementsByTagName("scroll");
    if(document.querySelector('scroll')){
        // Si la balise existe alors
        // On sélectionne le premier élément <scroll>
        var scroll_balise = document.getElementsByTagName("scroll")[0];
        // On récupère les paramètres
        var scroll_top = scroll_balise.getAttribute("top");
        var scroll_left = scroll_balise.getAttribute("left");
        var scroll_right = scroll_balise.getAttribute("right");
        var scroll_bottom = scroll_balise.getAttribute("bottom");
        var scroll_fixed = scroll_balise.getAttribute("fixed");
        var scroll_duration = scroll_balise.getAttribute("duration");
        var ajax_scroll_balise = $("scroll");
        
        // Cacher la balise scroll dès le chargement de la page
        scroll_balise.style.display = "none";
        
        if(scroll_bottom != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre bottom est défini, alors...
            scroll_balise.style.bottom = -140;
        }
        
        if(scroll_fixed == "true"){
            // Si le paramètre fixed est défini, alors...
            scroll_balise.style.position = "fixed";
        }
        if(scroll_top != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre top est défini, alors...
            scroll_balise.style.top = scroll_top;
        }
        if(scroll_left != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre left est défini, alors...
            scroll_balise.style.left = scroll_left;
        }else if(scroll_right != null && scroll_balise.style.position == "fixed"){
            // Si le paramètre right est défini, alors...
            scroll_balise.style.right = scroll_right;
        }
        
        // Une fois tous les éléments définis, on s'occuper de détecter la position du scroll
        $(function () {
            var $fenetre = $(window);
            $fenetre.scroll(function () {
                // On vérifie si le curseur est en haut de la page
                if ($fenetre.height() + $fenetre.scrollTop() == $(document).height()) {
                    ajax_scroll_balise.clearQueue();
                    // Si le bouton est "bien placé" alors jouer l'animation
                    if(scroll_bottom != null && scroll_balise.style.position == "fixed" && parseInt(scroll_balise.style.bottom) === parseInt(scroll_bottom)){
                        $("scroll").animate({bottom: -140}, 500);
                    }
                } else {
                    // Si il est en bas de la page on "montre" la balise <scroll>
                    scroll_balise.style.display = "block";
                if(scroll_bottom != null && scroll_balise.style.position == "fixed" && !(parseInt(scroll_balise.style.bottom) === parseInt(scroll_bottom))){
                    ajax_scroll_balise.clearQueue();
                    // Si le bouton est "bien placé" alors jouer l'animation
                    scroll_balise.style.bottom = -140;
                    $("scroll").animate({bottom: scroll_bottom}, 300);
                }
            }
            });
        });
        
        $("scroll").click(function(){
            // Si on clique sur le bouton de retour vers le haut
            var scroll_tour;
            var scroll_total = 500;
            var $fenetre = $(window);
            // Animation pour le retour vers le haut, vous pouvez modifier le 700 pour la durée de scroll automatique vers le haut (en ms)
            $("html, body").animate({scrollTop: 0}, 700);
        });
        
    }else{
        // Si la balise n'existe pas alors
        console.log("Impossible de trouver la balise <scroll>");
    }
}

 

 

Rapidement, si il y en a qui sont intéressés par changer la vitesse du scroll automatique, allez à la ligne 78 du fichier, ou vous pouvez voir ceci :

// Animation pour le retour vers le haut, vous pouvez modifier le 700 pour la durée de scroll automatique vers le haut (en ms)
$("html, body").animate({scrollTop: 0}, 700);

Sachez que vous pouvez modifier le 700 pour allonger ou rétrécir la durée du scroll (1s = 1000ms)

 

Voilà ! J’espère que ce nouveau plugin vous plaira, si je sors moins de plugins en ce moment c'est juste que je travaille sur pas mal de projets donc j'ai moins de temps à consacrer aux plugins (et en parallèle, je n'ai plus d'idées)

Et bien comme d'habitude, si le plugin vous à "plu", vous pouvez toujours mettre un +1 

En attendant,

Bonne soirée/journée à tous et très bonne continuation !

>_Ubrain

Modifié le 19 décembre 2018 par Ubrain

[Chesterfield 48]

merci pour le partage

[Yumi 85]

Salut,

 

Merci du partage, je pense que cela peut en aider plus d'un

 

- Rick

[Funky Drugs 398]

Merci à toi pour le partage !