Script "haut de page".

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par mjaM, 4 Janvier 2022.

  1. mjaM
    mjaM Nouveau WRInaute
    Inscrit:
    26 Novembre 2021
    Messages:
    9
    J'aime reçus:
    0
    Bonjour et meilleurs voeux pour 2022.

    Je cherche un script "haut de page" servant à faire remonter la page lorsque l'internaute est sur le footer.
    Pas trop compliqué quand même et utilisable sur html.

    Dans l'attente de vos réponses.

    mja Mahé
     
  2. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 685
    J'aime reçus:
    153
    Un bouton qui pointe vers une id en haut de page, même pas besoin d'un script, c'est du pur html
     
  3. mjaM
    mjaM Nouveau WRInaute
    Inscrit:
    26 Novembre 2021
    Messages:
    9
    J'aime reçus:
    0
    Vous avez un exemple?
    Si cela fonctionne, je n'y vois aucun inconvénient. J'ai vu des scripts java script+css+jquery etc, etc..
    Dîtes-moi ce que vous en pensez?
    Personnellement, plus c'est simple, moins il y a de poids sur la page!
     
  4. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 973
    J'aime reçus:
    121
    D'un point de vue utilisateur, forcer la main de l'internaute n'est jamais une bonne chose. Je suis donc davantage dans l'optique de Marie-Aude, un bouton / lien HTML qui pointe vers une ancre située en haut de la page ça reste le truc le plus pertinent.
     
    Marie-Aude apprécie ceci.
  5. mjaM
    mjaM Nouveau WRInaute
    Inscrit:
    26 Novembre 2021
    Messages:
    9
    J'aime reçus:
    0
    Effectivement, cela fonctionne très bien.

    Merci de vos conseils.
     
  6. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 982
    J'aime reçus:
    331
    J'ai l'impression que cette mode du bouton permettant de retourner en haut est de moins en moins présente, peut-être qu'on commence à réaliser que les gens savent remonter par eux-mêmes s'ils le souhaitent...
     
  7. emualliug
    emualliug WRInaute occasionnel
    Inscrit:
    1 Février 2020
    Messages:
    437
    J'aime reçus:
    100
    Tu as raison @rick38, il y a un effet de mode autours du bouton flottant "retour en haut". Pour autant, je ne le trouve pas complètement toujours inutile, notamment sur mobile, où c'est plus simple que de faire défiler l'écran qui peut être assez long.

    Mais il faut se demander pourquoi l'utilisateur aurait besoin de "revenir en haut", souvent c'est pour accéder au menu / header, mais on peut mieux faire, soit avec un header fixe soit, mieux à mon sens, un header qui disparaît lorsqu'on fait défiler vers le bas et réapparaît dès qu'on fait défiler vers le haut.

    Dans tous les cas, s'assurer que le bouton ne vienne pas masquer le texte : discret, bien en bas, rajouter de la hauteur de page pour que ça ne masque pas le footer arrivé tout en bas.

    Un peu de javascript peut être utile. Je trouve qu'un retour à l'origine brusque peut perturber l'utilisateur, alors qu'avec quelques lignes on peut faire un défilement qui lui montre qu'on est en train de revenir en haut (un truc rapide par contre, faut pas que la page mette 2 secondes à remonter, le but est d'aller vite).

    Et quitte à mettre un peu de JS, faire en sorte que le bouton ne soit visible que lorsqu'on est pas tout en haut de la page.

    Une petite inspiration en JS avec jquery, avec un lien permettant de revenir en haut qui a pour id "back-to-top" :

    Code:
    jQuery(document).ready(function ($) {
       $(window).scroll(function () {
          if ($(this).scrollTop() > 120) {
              $('#back-to-top').fadeIn('slow');
          } else {
              $('#back-to-top').fadeOut('normal');
          }
       });
     
       $('#back-to-top').click(function(){
          $("html, body").animate({ scrollTop: 0 }, 500);
          return false;
       });
    });
    
     
  8. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 354
    J'aime reçus:
    86
    Regarde en bas à droite de ce topic, OD le propose dans les 2 sens, un pour remonter, l'autre pour redescendre :D Bien utile quand le topic fait 50 000 mots ;)
     
  9. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 982
    J'aime reçus:
    331
    Ah jamais remarqué :D
    Ca serait intéressant d'avoir des stats sur le nombre de gens qui l'utilisent, moi je suis de l'école de ne pas mettre de fonctionnalités peu utilisées, ça surcharge pour rien.
    Pour remonter je fais Ctrl+Deb ou la souris ou flèche PgUp... je suis un vieux...
    Bon sur mobile OK, mais pourquoi remonter... normalement on descend...

    C'est ça la question. Revenir au tout au début instantanément, il n'y a pas vraiment de raison, ça doit concerner très peu d'utilisateurs qui veulent ça.
     
  10. mickou51
    mickou51 WRInaute discret
    Inscrit:
    8 Janvier 2016
    Messages:
    199
    J'aime reçus:
    21
    Chez moi il y a bien les deux petites flèches sur Webrankinfo , mais aucune ne fonctionne quand je clic dessus, testé sur Firefox et Chrome.

    J'utilise aussi ce système de "back to top" sur seulement un seul de mes sites pour cause que ça descend très bas, et il faut remonter tout en haut le plus vite possible, c'est très utile
     
  11. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    658
    J'aime reçus:
    108
    Pas besoin d'ancre vers un id pour remonter en haut de page, un simple # suffit.
    Il est bon de rajouter un tout petit peu de javascript pour éviter de rajouter une entrée à l'history du navigateur et perturber le comportement attendu du bouton de "Page précédente" du navigateur :
    Code:
    <a href="#" onclick="scrollTo(0,0); return false;">Haut de page</a>
     
    WebRankInfo apprécie ceci.
Chargement...
Similar Threads - Script Forum Date
Le javascript protège-t-il du copiage HTML ? Développement d'un site Web ou d'une appli mobile 9 Mai 2022
Sites de scripts PHP, jQuery, Ajax, etc. Le café de WebRankInfo 20 Mars 2022
Tester une URL avec Javascript Développement d'un site Web ou d'une appli mobile 25 Février 2022
jour en javascript Développement d'un site Web ou d'une appli mobile 24 Février 2022
Search Console Probleme Meta title & Meta description fiche produit Référencement Google 27 Janvier 2022
référencement site full javascript Débuter en référencement 17 Janvier 2022
Détecter arrêt user d'un script PHP ? Développement d'un site Web ou d'une appli mobile 28 Décembre 2021
Astuce Référencement Playstore et pré inscription Référencement Google 17 Décembre 2021
Problèmes dans le méta-titre / description + Sitemap Référencement Google 29 Novembre 2021
Même contenu descriptif vidéo Youtube et fiche produit site Débuter en référencement 26 Novembre 2021
Texte de meta description erroné Demandes d'avis et de conseils sur vos sites 25 Novembre 2021
Google réécrit la meta description Référencement Google 21 Novembre 2021
Duplicate content sur la meta description Débuter en référencement 14 Novembre 2021
Combien de mots pour des descriptions de fiches produit Référencement Google 5 Novembre 2021
Javascript et preloader Référencement Google 16 Septembre 2021
Actualiser un script php toutes les 10 secondes Développement d'un site Web ou d'une appli mobile 6 Septembre 2021
Javascript API cache query non url ? Développement d'un site Web ou d'une appli mobile 18 Août 2021
Meta description vide dans Google mais ok dans Bing Problèmes de référencement spécifiques à vos sites 6 Juillet 2021
Aucune inscription sur mon forum Débuter en référencement 8 Mai 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021