{"id":470,"date":"2010-08-31T23:35:22","date_gmt":"2010-08-31T21:35:22","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=470"},"modified":"2015-01-18T17:33:20","modified_gmt":"2015-01-18T16:33:20","slug":"realiser-un-lien-top-qui-apparait-au-scroll-de-la-page-avec-jquery","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/realiser-un-lien-top-qui-apparait-au-scroll-de-la-page-avec-jquery","title":{"rendered":"R\u00e9aliser un lien \u00ab\u00a0top\u00a0\u00bb qui appara\u00eet au scroll de la page avec jQuery"},"content":{"rendered":"

C’est d\u00e9cid\u00e9, je vous proposerai de temps \u00e0 autres quelques tutoriels relativement simples lorsque mes disponibilit\u00e9s me le permettront (ou plus simplement pour faire une petite pause dans mon travail).
\nAujourd’hui nous allons voir comment r\u00e9aliser assez simplement un lien \u00ab\u00a0Retour en haut de page\u00a0\u00bb qui apparait et disparait en fonction de la position du document dans la fen\u00eatre.
\nNous allons, bien entendu, utiliser la biblioth\u00e8que jQuery dans cette r\u00e9alisation.<\/p>\n

Avant-propos<\/h2>\n

L’utilisation de la biblioth\u00e8que jQuery<\/a> implique pour le visiteur un t\u00e9l\u00e9chargement de celle-ci, qui, non-zipp\u00e9e peut-\u00eatre assez lourde si vous ne l’utilisez que pour ajouter un petit lien \u00ab\u00a0top\u00a0\u00bb. Il vous faudra peser le pour et le contre. Si vous utiliser WordPress, il est g\u00e9n\u00e9ralement automatiquement int\u00e9gr\u00e9 \u00e0 la plupart des templates, autant en profiter !<\/p>\n

L’id\u00e9e<\/h2>\n

\"\"Ce que nous souhaitons c’est faire appara\u00eetre un lien qui m\u00e8ne en haut de page. Comme ce lien va appara\u00eetre et dispara\u00eetre gr\u00e2ce \u00e0 un script JavaScript, le mieux reste de construire compl\u00e8tement cet \u00e9l\u00e9ment gr\u00e2ce \u00e0 JavaScript.
\nPourquoi ?
\nSi jamais le visiteur navigue sans JS activ\u00e9, celui-ci ne sera pas g\u00ean\u00e9 par un lien tout le temps pr\u00e9sent.
\nUne autre solution consiste \u00e0 le placer quelque part dans le code HTML, et \u00e0 le r\u00e9cup\u00e9rer et le positionner gr\u00e2ce \u00e0 JS, mais ce n’est pas la solution que je vous pr\u00e9senterai aujourd’hui.<\/p>\n

Le code par \u00e9tapes<\/h2>\n

Petit rappel : nous utilisons jQuery.<\/p>\n

    \n
  1. Premi\u00e8re \u00e9tape donc, pour ceux qui n’auraient pas d\u00e9j\u00e0 charg\u00e9 la biblioth\u00e8que, ajouter le script sur notre page. Pour sa position c’est au choix du d\u00e9veloppeur. Personnellement quand je le peux, je place les scripts juste avant <\/body><\/code> :\n
    <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\" type=\"text\/javascript\"><\/script><\/code><\/pre>\n
    Ici je charge jQuery depuis l’API Google, mais vous pouvez tout autant le charger depuis un dossier \u00e0 vous.<\/li>\n
  2. Il nous faut maintenant \u00e9crire notre code JavaScript, pour ce tutoriel je choisis de le mettre directement entre balises script<\/code> \u00e0 la suite de l’appel de la biblioth\u00e8que jQuery.
    \nVous pouvez tr\u00e8s bien le placer dans un fichier .js externe et l’appeler de la m\u00eame mani\u00e8re que la biblioth\u00e8que (cf. \u00e9tape 1).<\/p>\n
    <script type=\"text\/javascript\">\r\n   $(document).ready(function(){\r\n   \/\/*\r\n      Le code javascript sera mis ici\r\n   *\/\/\r\n   });\r\n<\/script>');<\/code><\/pre>\n
    Cette premi\u00e8re partie de code JavaScript signifie que nous allons ex\u00e9cuter les prochains scripts lorsque le document<\/code> sera pr\u00eat.<\/li>\n
  3. Nous devons maintenant construire notre lien qui aura une forme tout \u00e0 fait classique, mais qui sera ajout\u00e9 gr\u00e2ce jQuery.
    \nA la place de mon commentaire pr\u00e9c\u00e9dent, nous allons progressivement \u00e9crire notre code :<\/p>\n
    $('body').append('<a href=\"#top\" class=\"top_link\" title=\"Revenir en haut de page\">Haut<\/a>');<\/code><\/pre>\n
    La fonction append();<\/code><\/a> permet d’ajouter un contenu dans l’\u00e9l\u00e9ment cibl\u00e9 \u00e0 la suite de tout ce qu’il contient. Cet \u00e9l\u00e9ment ici est body<\/code>. Il suffit ensuite d’\u00e9crire ce que l’on souhaite ajouter entre guillemets.<\/li>\n
  4. Continuons en ajoutant \u00e0 la suite les styles de notre lien. Ces styles peuvent \u00e9craser des styles existants de votre feuille de styles.\n
    $('.top_link').css({\r\n\t'position'\t\t\t\t:\t'fixed',\r\n\t'right'\t\t\t\t\t:\t'20px',\r\n\t'bottom'\t\t\t\t:\t'50px',\r\n\t'display'\t\t\t\t:\t'none',\r\n\t'padding'\t\t\t\t:\t'20px',\r\n\t'background'\t\t\t:\t'#fff',\r\n\t'-moz-border-radius'\t:\t'40px',\r\n\t'-webkit-border-radius'\t:\t'40px',\r\n\t'border-radius'\t\t\t:\t'40px',\r\n\t'opacity'\t\t\t\t:\t'0.9',\r\n\t'z-index'\t\t\t\t:\t'2000'\r\n});\r\n<\/code><\/pre>\n
    Comme pr\u00e9c\u00e9demment, nous utilisons une fonction, ici css()<\/code><\/a>, qui permet d’attribuer des styles \u00e0 l’\u00e9l\u00e9ment cibl\u00e9. La cible \u00e9tant le lien cibl\u00e9 par sa classe : .top_link<\/code><\/li>\n
  5. Nous allons maintenant passer aux choses s\u00e9rieuses (mais pas trop quand m\u00eame) : la fonction qui v\u00e9rifie la position de la fen\u00eatre.
    \nCe que nous souhaitons, c’est v\u00e9rifier cette position d\u00e8s que l’utilisateur scroll<\/em> dans la page, en descente ou en mont\u00e9e.
    \nD\u00e8s que celui-ci arrive \u00e0 un certain niveau cl\u00e9 dans la page (niveau d\u00e9fini en pixels du haut de la page), nous faisons apparaitre ou disparaitre le lien.
    \nVoici le code complet, je vous l’explique ensuite :<\/p>\n
    $(window).scroll(function(){\r\n\tposScroll = $(document).scrollTop();\r\n\tif(posScroll >=550) \r\n\t\t$('.top_link').fadeIn(600);\r\n\telse\r\n\t\t$('.top_link').fadeOut(600);\r\n});<\/code><\/pre>\n
    Plut\u00f4t court n’est-ce pas ?<\/p>\n