Une fonction telle que le bouton "up" du site rend la ressource Internet plus pratique pour ses visiteurs. Il vous aide à vous déplacer facilement de n'importe où sur la page vers le haut de la page. C'est un must pour les boutiques en ligne et les sites avec des articles volumineux qui nécessitent un long défilement vers le bas.
À quoi ça sert
Pour le moment, la plupart des sites n'ont pas de fonction telle qu'un bouton "up", et il n'y a rien de critique à cela. Mais son utilisation peut apporter de nombreux avantages tant pour la ressource Internet que pour ses visiteurs.
Avantage pour les visiteurs
Cela arrive souvent lorsque la page d'une ressource Internet est très chargée d'informations, lorsqu'un article informatif prend beaucoup de place et que vous devez faire défiler la page avec la molette de la souris. En plus de cela, à la fin de l'article, il peut y avoir de nombreux commentaires à ce sujet.
Lorsqu'un visiteur lit un article, il n'y a rien de fastidieux à faire défiler la page vers le bas, mais quand le texte est terminé et qu'il faut remonter, ça commence à devenir un peu lassant. La plupart des gens seront tout simplement trop paresseux pour faire défiler pendant longtemps, et ils fermeront simplement le site, au lieu de faire une autre promenade dans ses étendues.
Utiliser le boutonpour passer instantanément en haut de la page, il est plus pratique de passer du temps sur le site.
Avantage pour la ressource Internet
Les points positifs pour la ressource elle-même proviennent de facteurs passés, car une navigation plus facile sur le site améliore les facteurs comportementaux, car tous les visiteurs seront plus actifs dans leurs actions et passeront à d'autres pages.
Ainsi, ces facteurs comportementaux affectent l'attitude de tous les moteurs de recherche vis-à-vis du site et conduisent à une amélioration de la position dans les résultats de recherche.
Comment créer vous-même le bouton "up" sur le site
Traiter plus loin. Vous pouvez toujours créer vous-même un bouton de défilement vers le haut pour un site sur n'importe quel CMS en suivant quelques étapes extrêmement simples:
- création d'images;
- créer un script;
- créer un style de bouton;
- ajout au site.
Image du bouton
Pour ajouter un bouton "up" sur le site, vous devez d'abord créer l'icône elle-même, une fois cliqué, l'utilisateur se déplacera vers le haut de la page. Pour ce faire, vous pouvez utiliser des options toutes faites, parmi lesquelles vous pouvez toujours choisir celle qui vous convient le mieux.
Pour améliorer l'apparence du bouton, nous devons apporter quelques améliorations, à savoir créer un sprite qui nous permet de combiner des images d'arrière-plan basées sur CSS, créant ainsi une animation à partir d'elles.
Pour les travaux graphiques, vous pouvez utiliser n'importe quel éditeur. Mais l'option la plus pratique serait un service en ligne. PIXLR, car il n'y a rien à télécharger ici et vous pouvez l'utiliser directement dans votre navigateur.
Pour commencer, dans la fenêtre de l'éditeur qui apparaît, sélectionnez le champ "Télécharger l'image depuis l'ordinateur". Prenons l'image d'une fusée comme exemple.
Si les dimensions de l'icône sélectionnée sont trop grandes, vous devrez faire un petit ajustement de taille. Pour ce faire, allez dans le menu du haut et sélectionnez le champ "Modifier", et après "Transformation libre …"
Ensuite, des marqueurs spéciaux apparaissent à côté de l'image, vous permettant de modifier la taille de l'image. Pour conserver les proportions, vous pouvez utiliser la touche Maj enfoncée pour déplacer les marqueurs bleus. A la fin de ces étapes, une image d'une fusée est obtenue.
L'étape suivante consiste à créer une copie du calque.
Maintenant, vous devez déplacer un peu l'image de la fusée du nouveau calque vers le haut. Pour ce faire, il sera pratique d'utiliser l'outil de déplacement, qui se trouve dans la deuxième colonne du menu de gauche, et la flèche vers le haut du clavier.
Maintenant, nous devons mettre l'image du haut en noir et blanc. Cela peut être fait en utilisant l'élément "Correction" - "Teinte / Saturation" dans le menu du haut. Pour une désaturation complète, le curseur Saturation doit être réglé sur -100. Cette action vous permettra de créer un effet dans lequel le bouton "Haut" passera du noir et blanc à la couleur lorsque vous le survolerez.
La touche finale est la suppression de l'espace supplémentaire autour des deux images. Pour ce faire, sélectionnez l'élément "Recadrer" dans le menu de gauche etnous sélectionnons seulement deux fusées dans un rectangle. Pour effectuer le recadrage, appuyez sur la touche Entrée.
Le résultat est une image dans laquelle il n'y a pas d'espace libre supplémentaire. Vous devrez noter la largeur et la hauteur de l'image résultante, car ces données seront utiles à l'étape suivante.
Pour enregistrer, vous devez cliquer sur "Fichier" - "Enregistrer", où dans le paragraphe de gauche "Poste de travail", nous écrivons le nom de l'image (uniquement la mise en page en anglais), sélectionnez le format (dans ce cas, PNG) et cliquez sur le bouton "Oui".
Fichier avec le script du bouton "up"
Vous n'avez pas besoin d'écrire un script dans ce cas. Il sera possible d'utiliser la version publique, en apportant quelques modifications au code final.
Pour ce faire, vous devez télécharger n'importe quel éditeur de code. L'option la plus populaire et la plus gratuite est Notepad++. Après l'avoir installé, vous devez copier et coller tout ce code dedans:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); renvoie faux;}); }); |
Ensuite, cliquez dans le menu supérieur "Fichier" - "Enregistrer sous …", après quoi nous enregistrons le code au format.js. Après cela, vous pouvez utiliser ce code sur votre site en y téléchargeant les fichiers de script et les images à l'aide d'une connexion FTP.
Installation sur place
Pour définir le bouton de défilement vers le haut pour le site, vous devez placer danscode de lieu requis. Vous devez le saisir avant la balise.
Création d'un style de bouton avec CSS
Le plus souvent, le bouton "up" du site est situé en bas ("footer").
Le code suivant doit être ajouté au fichier style.css du site:
|
/Bouton Haut/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/chemin de l'image native/ width:39px;/ bouton width/ height:96px;/50% button height/ bottom:5px;/bas rembourrage à position fixe/ left:89%;/décalage vers la gauche/ }.scrollTop:hover{ background-position:0 -108px; } /décalage d'arrière-plan/" |
Dans ce cas, ces données de largeur et de hauteur d'image seront nécessaires. Il ne reste plus qu'à entrer les données reçues dans le code, et le bouton "up" du site sera prêt ! Quoi d'autre ?
Bouton vers le haut pour le site Wordpress
Pour ce CMS, le bouton "Haut" peut être créé à l'aide de plugins, ainsi que indépendamment.
La méthode des plugins est la plus pratique et la plus facile à installer, car elle ne nécessite que de cliquer sur le bouton d'installation et de configurer toutes les fonctionnalités dans le menu des plugins.
Le choix de ce dernier doit être abordé avec prudence, car avec lui, il sera facile d'acquérir un virus sur le site. L'option la plus populaire et la plus éprouvée est un plugin appelé Scroll Back To Top. Vous pouvez le télécharger en utilisant la recherche standard des plugins Wordpress.
Cette extension afonctionnalités multiples, et il sera très facile de personnaliser le bouton "up" pour un site Wordpress. Il n'est pas du tout nécessaire de modifier toutes les valeurs, il vous suffit de configurer l'apparence et l'emplacement du bouton sur la page du site.
Comme vous pouvez le voir, configurer le bouton up avec des plugins est très simple. Mais il y a une nuance importante, c'est que chaque plugin installé charge le CMS. Cela peut affecter la vitesse de la ressource Internet. C'est pourquoi la plupart des propriétaires de sites essaient d'apporter toutes les modifications directement dans le code, et non à l'aide d'extensions tierces. Vous pouvez créer un bouton "up" pour un site HTML, ce qui minimisera les ressources consommées.
Avant de modifier tous les fichiers système de Wordpress, vous devez les sauvegarder. Ensuite, vous pouvez suivre toutes les étapes pour créer votre propre bouton, décrites ci-dessus.
Bouton "up" pour Joomla
CMS Joomla prend également en charge l'installation de plugins, comme Wordpress. La version la plus réussie du bouton "up" pour un site sur Joomla 3 est une extension appelée Top of the Page.
Dans ce CMS, n'importe quel plugin peut être installé via le "Extension Manager". Pour cela, vous avez besoin de:
- télécharger le plugin sur Internet;
- cliquez sur le bouton "Parcourir" dans le gestionnaire d'extensions;
- sélectionner l'archive téléchargée;
- cliquez sur "Télécharger" et installez.
Maintenant, vous devez l'activer dans le "Plugin Manager". Pour çavous devez aller dans cette section, trouver le plugin et passer son statut à "activé".
L'étape suivante consiste à configurer tous les paramètres d'extension en utilisant la même section où vous devez trouver les "Paramètres de base" de ce plugin sur le côté droit.
Haut de la page a la fonctionnalité suivante:
- Run in/ administrator - activant l'option non seulement sur la ressource Internet, mais également dans le panneau Joomla CMS lui-même.
- Button Reveal Position - combien de pixels l'utilisateur doit rembobiner pour que le bouton haut apparaisse.
- Omettre le texte du bouton - la présence de texte sur le bouton.
- Toujours en haut - la page du site sera toujours affichée en haut. Lorsque vous utilisez des ancres pour faire défiler jusqu'à un emplacement spécifique sur la page, cette option n'a pas besoin d'être activée.
- Smooth Scroll - rend le défilement des pages plus fluide.
- Scroll Duration - le temps après lequel la page reviendra complètement au début.
- Scroll Transition - Ajoute plus d'effets visuels au défilement.
- Transition Easing - "affaiblit" le mouvement vers le haut de la page.
- Emplacement du lien - l'emplacement de l'icône. Par défaut, le bouton est situé dans le coin inférieur droit.
- Utiliser les styles - style de bouton individuel, qui peut être défini dans le champ ci-dessous. Si vous passez à une valeur négative, tous les paramètres de style seront extraits du thème actif du site.
- Style de lien - un champ pour entrer vos paramètres de style de bouton.
Pour personnaliser le style du bouton "up", vous devez avoir au moins un minimumConnaissances CSC. Sinon, vous devez changer la valeur de l'avant-dernier paramètre sur "Non".
Une autre nuance importante est que l'inscription habituelle sur l'icône contient le texte anglais: Return to Top. Un tel texte ne peut pas être présent sur un site en russe, vous devez donc simplement le désactiver dans les paramètres du plugin ou le changer en russe.
Pour modifier cette inscription, vous devez vous rendre sur le serveur du site via FTP ou le gestionnaire de fichiers intégré à l'hébergement. Ensuite, dans le répertoire "/administrator/language/en-GB/" vous devez trouver un fichier nommé "en-GB.plg_system_topofthepage.ini".
Avant de changer le texte, vous devez changer l'encodage de ce document en UTF-8. Cela rendra l'affichage normal des lettres russes.
Ensuite, nous trouvons la ligne suivante:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Retour en haut"" |
et changez la phrase entre guillemets en russe. Vous pouvez utiliser des phrases telles que "En haut !", "Au sommet !" ou "Haut !".
À la fin, vous devrez enregistrer le fichier modifié et vérifier le bouton "up" pour le site sur Joomla.
Bouton Haut pour Ucoz
Le bouton "monter" du site sur Ucoz devra se faire par injection de code, car il est impossible de connecter des plugins pour ce CMS. Cependant, cela ne nécessite pas une longue étude des fichiers système et la recherche des lignes nécessaires, il vous suffit de coller un petit code au bon endroit.
Pour nous installerrequis:
- aller dans "Panneau de configuration -> Design -> Design Management (templates) -> Bas du site;
- insérer le script (peut être trouvé sur le site officiel du projet et des ressources tierces).
Conclusion
Après cela, une icône apparaîtra dans le coin inférieur droit, déplaçant l'utilisateur tout en haut de la page.
Comme vous pouvez le constater, la configuration du bouton de retour pour n'importe quel CMS n'a pas été particulièrement difficile. Vous pouvez utiliser à la fois une méthode d'installation automatisée (plugins) et une méthode manuelle. Cependant, cette dernière option reste la plus adaptée, car elle ne nuit pas aux performances du site.
Vous pouvez utiliser le bouton "retour en haut" d'un site HTML pour minimiser la consommation des ressources du site, car un grand nombre d'extensions peut avoir un impact négatif sur les performances de la ressource. Un plugin de bouton "up" ne pourra pas grandement affecter le temps de chargement des pages du site, mais dans la plupart des cas l'utilisateur a au moins une douzaine de plugins installés sur le CMS. Dans ce cas, tout plugin peut nuire aux performances des pages du site.
