Button "up" for the site: how to do

A function such as an up button for a site makes an online resource more convenient for its visitors. It helps you easily move from anywhere on the page to its top. It is simply necessary for online stores and sites with large articles requiring a long scroll down.

What is it for?

At the moment, on most sites there is no such function as the up button, and this is not critical. But its use can bring many advantages for both the Internet resource and its visitors.

Visitor Benefits

It often happens when the page of an Internet resource is heavily loaded with information, when an information article takes up a lot of space and you have to scroll down the page with the mouse wheel. In addition to this, at the end of the article there may be many comments on it.

When a visitor reads an article, there is nothing tedious in scrolling down the page, but when the text comes to an end and you need to move up, it starts to get a little tiring. Most people will be too lazy to conduct a long scrolling, and they will simply close the site, instead of still taking a walk through its expanses.

Using the button to instantly move to the top of the page makes spending time on the site more convenient.

Usefulness for an Internet resource

The positive aspects for the resource itself come from past factors, because simplified navigation on the site improves behavioral factors, since all visitors will be more active in their actions and go to other pages.

Thus, these behavioral factors affect the attitude of all search engines to the site and lead to an improvement in the place in the search results.

How to make the "up" button on the site yourself

We understand further. The scroll button up for a site on any of the CMS can always be done independently, following just a few extremely simple steps:

• image creation;
• script creation;
• button style creation;
• adding to the site.

Button Image

To add the up button on the site, first you need to make the icon itself, when you click on it, the user will move up the page. For this, you can use ready-made options, among which you can always choose the most suitable.

To improve the appearance of the button, it is necessary to make some improvements, namely to make a sprite that allows CSS-based background images to be combined, thereby creating an animation from them.

For graphic work, you can use any editor. But the most convenient option is the PIXLR online service, since you do not need to download anything here and you can use it directly in your browser.

To get started, in the editor window that appears, select the "Download image from computer" field. As an example, take the image of a rocket.

If the dimensions of the selected icon are too large, you will need to make a small size adjustment. To do this, go to the top menu and select the "Edit" field, and after "Free transform ..."

Next, special markers appear next to the picture, moving which, you can resize the image. To preserve the proportions, you can use the Shift key, holding it, you need to move the blue markers. At the end of these actions, an image of the rocket is obtained.

The next step is to create a copy of the layer.

Now you need to move the picture of the rocket from the new layer a little up. To do this, it will be convenient to use the move tool, which is located in the second column of the left menu, and the up arrow on the keyboard.

Now you need to make the top picture black and white. This can be done using the “Correction” - “Hue / Saturation” item in the top menu. For complete discoloration, the Saturation slider should be set to -100. This action will allow you to make an effect in which the Up button will turn from black and white to color when you hover over it.

The final touch is the removal of excess space around two images. To do this, select the item "Trim" from the left menu and select only two rockets in the rectangle. To crop, press the Enter key.

The result is an image in which there is no extra free space. You will need to record the width and height of the resulting image, as this data will be useful in the next step.

To save, click on “File” - “Save”, where in the left paragraph “My Computer” write the name of the image (only the English layout), select the format (in this case, PNG) and click the “Yes” button.

File with up button script

Writing a script in this case is not necessary. It will be possible to use the publicly available option, making some amendments to the finished code.

To do this, you need to download any code editor. The most popular and also free option is Notepad ++. After installing it, you need to copy and paste all the given code into it:

Next, click “File” - “Save As ...” in the top menu, then save the code in .js format. After that, you can use this code on your website by uploading script files and images to it using an FTP connection.

Installation on the site

To set the scroll button up for the site, you need to place the code in the required place. It must be entered before the </body> tag.

Creating a Button Style in CSS

Most often, the up button for a site is located at the bottom (the "basement").

The following code must be entered into the style.css file of the site:

In this case, you will need those data of the width and height of the image. It remains only to enter the data into the code, and the "up" button for the site will be ready! What else?

Up button for a site on Wordpress

For this CMS, the Up button can be done using plugins, as well as independently.

The method with plugins is the most convenient and easy to install, since for this you only need to click on the install button and configure all the functionality in the plugin menu.

The choice of the latter should be approached with caution, since with it it will be possible to easily acquire the virus on the site. The most popular and proven option is a plugin called Scroll Back To Top. You can download it using the standard Wordpress plugin search.

This extension has multiple functionality, and it will be very simple to individualize the up button for a site on Wordpress. It is not necessary to change all the values, you only need to configure the look and location of the button on the site page.

As you can see, installing the up button using plugins is very simple. But there is one important nuance, that each installed plug-in loads CMS. This may affect the performance of the Internet resource. That is why the majority of site owners try to make all changes directly in the code, and not with the help of third-party extensions. You can make the "up" button for the site in HTML, which will reduce the consumed resources to the maximum.

Before modifying all Wordpress system files, you must back them up. Next, you can follow all the steps to create your button described above.

Up button for Joomla

CMS Joomla also supports installing plugins, like Wordpress. The most successful version of the up button for a site on Joomla 3 is an extension called Top of the Page.

In this CMS, any plugin can be installed through the "Extension Manager". To do this, you must:

• Download the plugin on the Internet;
• click on the "Browse" button in the extension manager;
• select the downloaded archive;
• Click "Download" and install.

Now you need to activate it in the "Plugin Manager." To do this, go to this section, find the plug-in and switch its status to “enabled”.

Next is the setting of all the extension parameters using the same section where you need to find the "Basic parameters" of this plugin on the right side.

Top of the Page has the following functionality:

• Run in / administrator - enabling the option not only on the Internet resource, but also in the Joomla CMS panel itself.
• Button Reveal Position - how many pixels the user must rewind in order for the up button to appear.
• Omit Button Text - the presence of text on the button.
• Always at Top - the site page will always be displayed from its beginning. When using the "anchors" to scroll to a specific place on the page, this option does not need to be activated.
• Smooth Scroll - makes scrolling a page smoother.
• Scroll Duration - the time after which the page will completely move to the beginning.
• Scroll Transition - adds scrolling great visual effects.
• Transition Easing - “weakening” the movement to the top of the page.
• Link Location - location of the icon. By standard, the button is located in the lower right corner.
• Use Styles - an individual button style that can be set in the field below. If switched to a negative value, then all style parameters will be taken from the active topic of the site.
• Link Style - a field for entering your button style parameters.

To independently customize the style of the up button, you must have at least minimal CCS knowledge. Otherwise, it is worth switching the value of the penultimate parameter to "No".

Another important nuance is that the usual inscription on the icon contains English text: Return to Top. Such a text cannot be present on the Russian-language site, so you just need to disable it in the plugin parameters or change it to Russian.

To change this inscription, you need to go to the site server using FTP or the file manager built into the hosting. Next, in the directory “/ administrator / language / en-GB /” you need to find a file called “en-GB.plg_system_topofthepage.ini”.

Before changing the text, you should change the encoding of this document to UTF-8. This will allow a normal display of Russian letters.

Next we find the following line:

and change the phrase in quotation marks to Russian. You can use phrases such as “Up!”, “To the beginning!” or "Up!".

In the end, you will need to save the modified file and check for the up button for the Joomla website.

Up button for Ucoz

The up button for a site on Ucoz will have to be done using code injection, since plugins cannot be connected for this CMS. However, this does not require a long study of the system files and look for the necessary lines, you only need to insert a small code in the right place.

To install, we need:

• go to “Control Panel -> Design -> Design Management (templates) -> The lower part of the site;
• paste the script (can be found on the official website of the project and third-party resources).

Conclusion

After that, an icon will appear in the lower right corner, moving the user to the very top of the page.

As you can see, installing the Up button for any of the CMS was not particularly difficult. You can use either an automated installation method (plugins) or manual. However, the latter option remains the most suitable, since it does not adversely affect the site’s performance.

You can use the "up" button for an HTML site to minimize the consumption of site resources, since a large number of extensions can have a negative impact on the speed of a resource. One plugin of the up button will not be able to greatly affect the loading time of the site’s pages, but in most cases the user has at least a dozen plugins installed on the CMS. In this case, any plugin can adversely affect the speed of the site’s pages.