888 Shares 7755 views

bouton « Up » pour le site: comment faire

Une telle fonction, le bouton « up » pour le site, ce qui rend Internet ressource plus pratique pour ses visiteurs. Il permet de naviguer facilement partout dans la page dans la partie supérieure. Ceci est un must pour les magasins en ligne et des sites avec de grands articles qui nécessitent un long défilement vers le bas.

Pourquoi est-il nécessaire

À l'heure actuelle, la plupart des sites de cette fonction, le bouton « up » n'est pas, et il n'y a rien de critique. Mais son utilisation peut apporter de nombreux avantages tant pour les ressources Internet et à ses visiteurs.

Avantages pour les visiteurs

Souvent, lorsque la page de la ressource Internet est quantité très chargé de l'information, lorsque l'article d'information prend beaucoup d'espace et faire défiler vers le bas de la page à l'aide de la molette de la souris. Le plus pour cela, à la fin de l'article peut présenter beaucoup de commentaires à ce.

Quand un visiteur est en train de lire un article dans un défilement fastidieux personnel vers le bas d'une page n'est pas présent, mais quand le texte a pris fin et il est nécessaire de déplacer vers le haut, il commence à fatiguer un peu. La plupart des gens vont tout simplement trop paresseux pour mener une longue défilement, et ils ont juste fermer le site, plutôt qu'une autre promenade à travers ses espaces ouverts.

L'utilisation d'un bouton pour déplacer instantanément en haut de la page fait le passe-temps sur le site plus pratique.

Avantages d'une ressource Internet

Les aspects positifs de la ressource elle-même en fonction de facteurs historiques, car il est plus facile de naviguer sur le site améliore les facteurs comportementaux, comme tous les visiteurs seront plus actifs dans leurs actions et de passer à d'autres pages.

Ainsi données facteurs comportementaux affectent l'attitude de tous les moteurs de recherche sur le site et le plomb dans l'espace amélioré dans les résultats de recherche.

Comment faire le bouton « Up » sur le seul site web

Une enquête plus poussée. Pour faire défiler jusqu'au site à l'un des CMS, vous pouvez toujours faire votre propre en suivant quelques étapes très simples:

  • création d'une image;
  • la création du script;
  • Création d'un style de bouton;
  • ajouter au site.

image du bouton

Pour ajouter le « haut » sur le site, pour un besoin de commencer à se faire une icône, lorsque vous cliquez dessus, l'utilisateur se déplace la page. Vous pouvez utiliser les options ready-made, parmi lesquels on peut toujours choisir le plus approprié.

Pour améliorer l'apparence du bouton, vous devez apporter quelques améliorations, à savoir de faire un sprite, permet à base de CSS combiner les images de fond, ainsi avoir créé une courte animation.

Pour les travaux graphiques, vous pouvez utiliser un éditeur. Mais l'option la plus pratique est le service en ligne Pixlr, car il n'y a rien à télécharger et pas besoin, vous pouvez les utiliser directement dans votre navigateur.

Pour commencer à travailler dans l'éditeur de fenêtre pour choisir le « Télécharger une image de votre ordinateur. » À titre d'exemple, prendre l'image de la fusée.

Si la taille des icônes sélectionnées sont trop grandes, vous aurez besoin de faire un petit ajustement à la taille. Pour ce faire, « Modifier », allez dans le menu principal, puis sélectionnez le champ, et après «transformation libre …»

Ensuite, à côté de l'image il y a des marqueurs spéciaux qui se déplacent, vous pouvez redimensionner l'image. Pour conserver le rapport d'aspect, vous pouvez utiliser la touche Maj enfoncée, maintenant, vous devez déplacer les marqueurs bleus. A la fin de ces actions est obtenue image missiles.

La prochaine étape – la création d'une copie de la couche.

Maintenant, vous devez déplacer l'image des nouveaux missiles couche un peu. Pour ce faire, il sera commode d'utiliser l'outil de déplacement, qui est situé dans la deuxième colonne du menu de gauche, et la flèche « haut » sur le clavier.

Maintenant, vous devez faire l'image du haut en noir et blanc. Cela peut être fait en utilisant l'option « Correction » – « Teinte / Saturation » dans le menu supérieur. Pour un curseur de décoloration complète « saturation » doit prendre la valeur -100. Cette action fera l'effet que le bouton « Up » passe du noir et blanc à la couleur lorsque vous passez la souris dessus.

La touche finale – la suppression de l'espace excédentaire autour des deux images. Pour ce faire, sélectionnez l'élément « Trim » dans le menu de gauche et sélectionnez deux missiles dans un rectangle. Pour une presse parage sur la touche Entrée.

Pour obtenir une image dans laquelle il y a trop d'espace. Vous devez enregistrer la largeur et la hauteur des images obtenues, ces données seront utiles à l'étape suivante.

Pour enregistrer la nécessité de cliquer sur « Fichier » – « Enregistrer », où la gauche sous « Poste de travail » écrire le nom de l'image (seule la disposition du clavier en anglais), choisissez le format (dans ce cas – PNG) et cliquez sur « Oui ».

Fichier avec le script « Up »

Ecrire un script, dans ce cas, il ne faut pas. Il sera possible d'utiliser une option publique, apportant quelques modifications de code prêt.

Cela demandera de télécharger un éditeur de code. Le plus populaire et aussi une version gratuite – est Notepad ++. Après l'installation, vous devez copier-coller tout ce code:

<Script type = "text / javascript "> $ (document) .ready (function () {$ (fenêtre) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ( « # changeurs ') fadeIn (). } else {$ (' # changeurs ') fadeOut () ;.}}); $ (' # changeurs ') click (function () {$ ('. corps, html « ). animer ({scrollTop: 0}, 400); return false;}); });

Cliquez ensuite sur le menu principal « Fichier » – « Enregistrer sous … », puis enregistrez le code dans le format .js. Vous pouvez ensuite utiliser ce code sur votre site en téléchargeant un fichier de script et image à l'aide de connexions FTP.

Installation sur place

Pour régler le bouton de défilement pour le site, vous devez placer le code dans l'emplacement souhaité. Il doit être InScribe avant la balise .

Création d'un style de bouton avec CSS

Le plus souvent, le bouton « up » pour un site situé au fond ( « sous-sol »).

Le fichier style.css du site, vous devez ajouter le code suivant:

« / * Bouton au sommet * /

.scrollTop {
background: url ( 'images / up.png ') 0 0 no-repeat; / * onositelny chemin de l'image * /
largeur: 39px; / * largeur d'un bouton * /
hauteur: 96px; / * 50% de la hauteur du bouton * /
bottom: 5px; / * une position fixe de marge inférieure * /
gauche: 89%; / * décalage vers la gauche * /
}
.scrollTop: hover {background-position: 0 -108px; } / * Décalage l'arrièreplan * / "

Dans ce cas, les données nécessaires, et la largeur et la hauteur de l'image. Il ne reste plus qu'à entrer les données dans le code, et le bouton « up » pour le site sera prêt! Quoi d'autre?

bouton « Up » pour un site sur WordPress

Pour ce bouton CMS « Up » peut être fait avec l'aide de plug-ins, ainsi que de façon indépendante.

plugins La méthode la plus pratique et facile à installer, car il nécessite seulement un clic sur le bouton installer et configurer toutes les fonctionnalités du menu du plugin.

Par le choix de ce dernier est d'aborder avec prudence, car avec elle, vous pouvez facilement acquérir le virus sur le site. L'option la plus populaire et éprouvée – un plug-in appelé défilement Retour vers le haut. Vous pouvez le télécharger en utilisant les plug-ins de recherche standard WordPress.

Cette extension a des fonctionnalités multiples, et il est très facile à individualiser le bouton « up » pour un site sur WordPress. Tout changement de valeurs ne doit pas nécessairement configurer uniquement le type et l'emplacement du bouton sur la page Web.

Comme vous pouvez le voir, l'installation du bouton « up » avec l'aide de plug-ins est très simple. Mais il y a une mise en garde importante, qui consiste dans le fait que chaque plug-in installé charge le CMS. Cela peut affecter la vitesse de la ressource Internet. Voilà pourquoi la plupart des propriétaires de sites Web tentent d'effectuer tous les changements directement dans le code, au lieu d'utiliser les extensions tierces. Vous pouvez faire le bouton « up » pour le site en HTML, qui réduisent au minimum les ressources consommées.

Avant de modifier les fichiers système WordPress, vous devez les sauvegarder. Ensuite, vous pouvez suivre toutes les étapes pour créer vos boutons, décrits ci-dessus.

Frappez « up » pour Joomla

CMS Joomla prend également en charge l'installation de plug-ins comme WordPress. L'option la plus réussie bouton « up » pour un site sur Joomla 3 est un plug-in appelé haut de la page.

Ce CMS de tout plug-in peut être installé via le « Gestionnaire d'extensions ». Pour ce faire:

  • télécharger le plug-in sur Internet;
  • cliquez sur le bouton « Parcourir » dans le gestionnaire d'extension;
  • sélectionnez le fichier téléchargé;
  • cliquez sur « Télécharger » et installer.

Maintenant, vous devez l'activer dans le « Plugin Manager ». Pour ce faire, vous devez vous rendre à cette section, vous trouverez la fiche et changer son état « activé. »

Vient ensuite le réglage des options d'extension à l'aide de la même section, où vous devez trouver la section de ce plug-in « Paramètres de base » sur le côté droit.

Haut de page présente les caractéristiques suivantes:

  • Exécuter en / administrateur – activer l'option non seulement sur une ressource Internet, mais aussi dans le panneau CMS Joomla.
  • Bouton Révéler Position – combien de pixels doivent rembobiner l'utilisateur au bouton « up » là-bas.
  • Omettre Bouton Texte – Le texte du bouton.
  • Toujours au Top – Site tout le temps sera affiché depuis le début. Lorsque vous utilisez les « points d'ancrage » pour accéder à un emplacement spécifique sur la page, cette option n'a pas besoin d'être activé.
  • Smooth scroll – fait défiler la page plus lisse.
  • Durée de défilement – après laquelle la page est complètement déplacé vers le haut.
  • Transition de défilement – Rajoute défiler les grands effets visuels.
  • Transition Easing – «affaiblissement » mouvement en haut de la page.
  • Lien Localisation – icônes de localisation. En standard, le bouton situé dans le coin inférieur droit.
  • Utiliser les styles – boutons de style, qui peuvent être spécifiées dans le champ ci-dessous. Si vous avez changé à une valeur négative, tous les paramètres de styles seront prises à partir du site thème actif.
  • Style Lien – champ pour entrer vos paramètres de style de bouton.

Auto-tuning « Up » style de bouton, vous devez avoir un minimum de connaissances du CSC. Dans le cas contraire, vous devez changer la valeur du paramètre avant-dernier « Non ».

Une chose plus importante est que l'inscription habituelle sur l'icône contient un texte anglais: Retour en haut. Sur le site russe texte similaire ne peut pas être présent, vous devez simplement le désactiver dans les paramètres du plugin pour changer quoi que ce soit sur le russe.

Pour modifier les étiquettes doivent aller au serveur de site en utilisant le serveur ou hébergement gestionnaire de fichiers FTP intégré. Suivant dans le répertoire «/ administrateur / langue / fr-FR /» besoin de trouver un fichier appelé «en-GB.plg_system_topofthepage.ini».

Avant de modifier le texte devrait modifier le codage du document en UTF-8. Cela rendra l'affichage normal des lettres russes.

Ensuite, on trouve la ligne suivante:

"PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Return to Top " "

et changer l'expression entre guillemets dans la langue russe. Vous pouvez utiliser des expressions telles que « Up », « Start » ou « Up! ».

A la fin de la nécessité de sauvegarder le fichier modifié et vérifiez les boutons « up » pour le site sur Joomla.

bouton « Up » pour Ucoz

bouton « Up » pour un site sur Ucoz a à voir avec l'introduction du code, puisque la fiche de connexion pour ce CMS est impossible. Toutefois, cela ne nécessite pas beaucoup de temps pour apprendre les fichiers système et recherche de ligne nécessaire doit seulement insérer un petit code dans l'emplacement souhaité.

Pour l'installation, il faut:

  • aller à « Panneau de configuration -> Design -> Gestion de la conception (modèles) -> partie inférieure du site;
  • Insertion de script (peut être trouvé sur le site officiel du projet et des ressources tierces).

conclusion

Après cela, dans le coin inférieur droit de l'icône apparaît, déplacer l'utilisateur vers le haut de la page.

Comme on l'a vu, l'installation du bouton « Up » pour l'un des CMS n'a pas été particulièrement difficile. Il peut être utilisé comme une méthode automatisée d'installation (plug-ins), et manuel. Toutefois, cette dernière option est la plus appropriée, car elle n'a pas d'incidence défavorable sur la performance du site.

Vous pouvez utiliser le « up » pour le site en HTML, afin de minimiser le site de la consommation des ressources, comme un grand nombre d'extensions peut avoir un impact négatif sur la performance de la ressource. Un bouton de plug-in « up » n'affectera grandement le temps de chargement des pages, mais dans la plupart des cas, l'utilisateur est présent au moins une douzaine de plug-ins installés sur le CMS. Dans ce cas, un plug-in peut affecter les performances de vos pages.