"Up" button for the site: how to do it

Such a function, like the "up" button for a site, makes an Internet resource more convenient for its visitors. It helps you easily move from anywhere in the page to its top. This is just necessary for online stores and sites with large articles that require a long scroll down.

What is it for?

At the moment, there is no such function on the majority of sites as the "up" button, and there is nothing critical about this. But its use can bring many pluses both for the Internet resource, and for its visitors.

Benefits for visitors

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 can be many comments to it.

When a visitor reads an article, there is nothing tedious in scrolling down the page, but when the text has come to an end and it is necessary to move upwards, it starts to tire a little. Most people will just be too lazy to lead a long scroll, and they will just close the site, instead of still strolling through its expanses.

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

Benefits for an Internet resource

The positive sides for the resource itself are based on past factors, because a simplified movement on the site improves behavioral factors, as all visitors will be more active in their actions and move to other pages.

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

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

We understand further. The scroll up button for a site on any of the CMS can always be done by yourself, only a few very simple steps:

• Image creation;
• Creation of a script;
• Creating a button style;
• Adding to the site.

Button image

To add the "up" button on the site, you first need to make the icon itself, by clicking on which the user will move up the page. To do 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, which allows you to combine background images on the basis of CSS, thereby creating an animation from them.

For graphic works, you can use any editor. But the most convenient option will be the online service PIXLR, as there is nothing to download here and you can use it directly in the browser.

To start working in the editor window that appears, select the field "Upload image from computer". As an example, take the image of the rocket.

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

Further next to the picture there are special markers, moving them, you can change the size of the image. To save the proportions, you can use the Shift key, which, holding, you need to move the blue markers. At the end of these actions, the image of the rocket is obtained.

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

Now you need to move the rocket picture from the new layer a little bit 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 arrow "up" on the keyboard.

Now you need to make the top picture in black and white. This can be done using the "Correction" - "Hue / Saturation" item in the top menu. For complete decolorization, the Saturation slider must be set to -100. This action will allow you to make an effect when the "Up" button turns from black and white into color when you hover it.

The final touch is the removal of excess space around the two pictures. To do this, select the "Crop" item from the left menu and select only two missiles in the rectangle. To execute the cropping, press the Enter key.

The result is an image in which there is no excess space. It will be necessary to record the width and height of the resulting image, since this data will be useful in the next step.

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

File with the "up" button script

In this case, you do not need to write a script. It will be possible to take advantage of the public option, making some corrections in the finished code.

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