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:
    15
    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 952
    J'aime reçus:
    275
    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:
    15
    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:
    12 018
    J'aime reçus:
    133
    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:
    15
    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:
    2 096
    J'aime reçus:
    379
    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 impliqué
    Inscrit:
    1 Février 2020
    Messages:
    510
    J'aime reçus:
    122
    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 376
    J'aime reçus:
    94
    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:
    2 096
    J'aime reçus:
    379
    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:
    210
    J'aime reçus:
    23
    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:
    683
    J'aime reçus:
    113
    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
Meta description non prises en compte par google Rédaction web et référencement Jeudi à 11:20
WordPress Meta description produit avec WooCommerce Débuter en référencement 17 Novembre 2022
Bien gérer un script PHP un peu long Développement d'un site Web ou d'une appli mobile 12 Octobre 2022
Balise meta name description non prise en compte par Google Référencement Google 19 Septembre 2022
Deux questions pour deux scripts javascript. Développement d'un site Web ou d'une appli mobile 29 Août 2022
Search Console Comment réparer l'affichage de Google dans la mauvaise balise de description Meta ? Problèmes de référencement spécifiques à vos sites 19 Août 2022
Meta description différente de celle choisie (Rank Math + Qwant) Problèmes de référencement spécifiques à vos sites 25 Juillet 2022
Pages dynamiques avec Javascript ? Développement d'un site Web ou d'une appli mobile 14 Juillet 2022
Balise méta description : faut-il insérer son mot-clé ? Débuter en référencement 2 Juillet 2022
[JavaScript Array] modifier un code html sans le supprimer/recréer Développement d'un site Web ou d'une appli mobile 20 Juin 2022
Lien dans la description d'une vidéo YouTube...quel est prix raisonnable par mois ? YouTube, Google Images et Google Maps 16 Juin 2022
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