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

This function, like the "up" button for a site,makes the Internet resource more convenient for its visitors. It helps to 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 on most sites suchfunctions, like the "up" button, no, 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 the Internet resourceis heavily loaded with the amount of information when the 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 to it.

When a visitor reads an article, nothingtedious in scrolling down the page is not, 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 simply 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

button up for the site

The positive sides for the resource itself come fromfrom 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

button up for html site

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:

  • creating an image;
  • Creation of a script;
  • creating a button style;
  • adding to the site.

Button image

To add a button "up" on the site, foryou will need to make the icon itself, when clicked, 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, you need 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 you do not need to download anything here and you can use it right in your browser.

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

how to make a button up on the site

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

Next next to the picture there are specialmarkers, by moving which, you can resize the image. To save the proportions, you can use the Shift key, by clamping it, 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 froma 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 full discolouration, the Saturation slider must be set to -100. This action will make the effect that the "Up" button will turn from black and white to color when you hover it.

The final touch is the removal of excess spacearound 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.

how to make a button up on the site

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

File with the button up 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 to 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:

<script type = "text / javascript"> $ (document).ready (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ("# scroller"). fadeIn ();} else {$ ("# scroller "). fadeOut ();}}); $ (" # scroller "). click (function () {$ (" body, html "). animate ({scrollTop: 0}, 400); return false;} );}); </ script>

Then click on the upper menu "File" - "Saveas ... ", then we save the code in the .js format. After that, you can use this code on your site, uploading the 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 desired location. You must enter it before the tag </ body>.

Creating a button style in CSS

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

In the site style.css file, you need to enter the following code:

"/ * Up button * /

.scrollTop {
background: url ("images / up.png") 0 0 no-repeat; / * a simple path to the image * /
width: 39px; / * width of the button * /
height: 96px; / * 50% of the height of the button * /
bottom: 5px; / * for a fixed position, the indent from the bottom * /
left: 89%; / * offset left * /
.scrollTop: hover {background-position: 0 -108px; } / * background offset * / "

In this case, you need the data 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 Wordpress site

how to make a button up on the site

For this CMS, the "Up" button can be made with the help of plug-ins, as well as independently.

The method with the plugins is most convenient and easy to install, because this requires only clicking on the install button and adjust all the functionality in the plugin menu.

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

This extension has multiplefunctional, and it will be very simple to individualize the "up" button for the site on Wordpress. All the values ​​need not be changed at all, you only need to configure the appearance and location of the button on the site page.

As you can see, setting the button up withplugins is very simple. But there is one important nuance, that each installed plugin loads the CMS. This can affect the speed of the Internet resource. That's why most site owners try to execute all the changes directly in the code, and not with the help of third-party extensions. You can make the button "up" for the site on HTML, which will minimize the consumed resources.

Before changing all system files WordPress must make their backup copies. Next, you can follow all the steps to create your own button, described above.

Knoka "up" for Joomla

button up for joomla 3

CMS Joomla also supports the installation of plug-ins, 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 plug-in can be installed through the "Extension Manager". To do this you need:

  • download plug-in on the Internet;
  • Click 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 state to "on".

Next, you configure all the extension options using the same section where you need to find the "Basic Parameters" of this plug-in on the right side.

Top of the Page has the following functionality:

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

To customize the style of the button "up" you need to have at least a minimum knowledge of CCS. Otherwise, it is necessary to switch the value of the penultimate parameter to "No".

Another important nuance is thatThe usual inscription on the icon contains the English text: Return to Top. On a Russian-language site, such a text can not be present, so you just turn it off in the plugin settings or change it to Russian.

To change this inscription, go toserver site using FTP or built-in hosting file manager. Then 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 make a normal display of Russian letters.

Next we find the following line:


and change the phrase in quotes to the Russian language. You can use phrases like "Up!", "In the beginning!" Or "Up!".

At the end, you will need to save the modified file and check for a "up" button for the site on Joomla.

Up button for Ucoz

scroll up button for the site

The "up" button for the site on Ucoz will have to be donewith the introduction of code, since plug-ins for this CMS can not be connected. 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 required location.

To install, we need:

  • go to "Control Panel -> Design -> Design Management (Templates) -> Bottom of the Site;
  • insert a script (can be found on the official website of the project and third-party resources).


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, setting the "Up" button forany of the CMS was not particularly difficult. You can use both the automated installation method (plug-ins) and 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 the site on theHTML, to minimize the consumption of site resources, since a large number of extensions can have a negative impact on resource performance. One plug-in button "up" can not greatly affect the load time of the pages of the site, but in most cases, the user has at least a dozen plug-ins installed on the CMS. In this case, any plug-in can negatively affect the performance of the site pages.

  • Rating: