Such a function as the "up" button for the site makes the Internet resource more convenient for its visitors. It helps you easily move from anywhere on the page to the top of the page. This is a must for online stores and sites with large articles that require long scrolling down.
What is it for
At the moment, most sites do not have such a function as a "up" button, and there is nothing critical in this. But its use can bring many advantages both for the Internet resource and for its visitors.
Benefit for visitors
It often happens when the page of an Internet resource is heavily loaded with information, when an informational 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 tiresome about scrolling down the page, but when the text has come to an end and you have to move up, it starts to get a little tiresome. Most people will simply be too lazy to scroll for a long time, and they will simply close the site, instead of taking another walk around its expanses.
Using the buttonto instantly move to the top of the page makes it more convenient to spend time on the site.
Benefit for the Internet resource
The positives for the resource itself come from past factors, as easier site navigation 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 position in the search results.
How to make the "up" button on the site yourself
Dealing further. You can always make a scroll up button for a site on any of the CMS yourself by following just a few extremely simple steps:
- image creation;
- creating a script;
- create button style;
- adding to the site.
Button image
To add a "up" button on the site, first you need to make the icon itself, when clicked, the user will move to the top of the page. To do this, you can use ready-made options, among which you can always choose the most suitable one.
To improve the appearance of the button, we need to make some improvements, namely, to make a sprite that allows us to combine background images based on CSS, thereby creating an animation out of them.
For graphic works, you can use any editor. But the most convenient option would be an online service. PIXLR, since there is nothing to download here and you can use it directly in your browser.
To get started, in the editor window that appears, select the "Upload image from computer" field. Let's take the image of a rocket as an example.
If the dimensions of the selected icon are too large, then 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 change the size of the image. To maintain proportions, you can use the Shift key, holding which you need to move the blue markers. At the end of these steps, an image of a 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 up a bit. 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 we 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 desaturation, the Saturation slider should be set to -100. This action will allow you to create an effect in which the "Up" button will turn from black and white to color when you hover over it.
The final touch is removing extra space around the two pictures. To do this, select the "Crop" item from the left menu andwe select only two rockets in a rectangle. To perform cropping, the Enter key is pressed.
The result is an image in which there is no extra free space. You will need to write down the width and height of the resulting image, as these data will be useful in the next step.
To save, you need to click on "File" - "Save", where in the left paragraph "My Computer" we write the name of the image (only the English layout), select the format (in this case, PNG) and click the "Yes" button.
File with the script of the "up" button
You don't need to write a script in this case. It will be possible to use the public version, 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 this code into it:
| $(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;}); }); |
Next, click in the top menu "File" - "Save as …", after which we save the code in.js format. After that, you can use this code on your site by uploading the script files and images to it using an FTP connection.
Install on site
To set the scroll up button for the site, you need to place inrequired place code. You need to enter it before the tag.
Creating a Button Style with CSS
Most often, the "up" button for the site is located at the bottom ("footer").
The following code must be added to the site's style.css file:
|
/Up Button/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button width/ height:96px;/50% button height/ bottom:5px;/bottom padding at fixed position/ left:89%;/ shift left/ }.scrollTop:hover{ background-position:0 -108px; } /background offset/" |
In this case, those image width and height data will be needed. It remains only to enter the received data into the code, and the "up" button for the site will be ready! What else?
Up button for Wordpress site
For this CMS, the "Up" button can be made using plugins, as well as independently.
The plugins method is the most convenient and easy to install, as it only requires you 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 easy to acquire a 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 hasmultiple functionality, and it will be very easy to customize the "up" button for a Wordpress site. It is not necessary to change all values at all, you only need to configure the appearance and location of the button on the site page.
As you can see, setting up the up button with plugins is very easy. But there is one important nuance, which is that each installed plugin loads the CMS. This may affect the speed of the Internet resource. That is why most site owners try to make all changes directly in the code, and not with the help of third-party extensions. You can make an "up" button for the site in HTML, which will minimize the resources consumed.
Before changing all Wordpress system files, you need to back them up. Then you can follow all the steps for creating your own button, described above.
Button "up" for Joomla
CMS Joomla also supports the installation of 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". For this you need:
- download the plugin on the Internet;
- click on the "Browse" button in the extension manager;
- select downloaded archive;
- click "Download" and install.
Now you need to activate it in the "Plugin Manager". For thisyou need to go to this section, find the plugin and switch its status to "enabled".
The next step is to configure 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 top. When using anchors to scroll to a specific location on the page, this option does not need to be enabled.
- Smooth Scroll - makes page scrolling smoother.
- Scroll Duration - the time after which the page will completely move to the beginning.
- Scroll Transition - Adds more visual effects to scrolling.
- Transition Easing - "weakening" the movement to the top of the page.
- Link Location - the location of the icon. By default, the button is located in the lower right corner.
- Use Styles – individual button style, which can be set in the field below. If switched to a negative value, then all style settings will be taken from the active theme of the site.
- Link Style - a field for entering your button style parameters.
To customize the style of the "up" button, you must have at least minimalCCS knowledge. Otherwise, you should switch the value of the penultimate parameter to "No".
Another important nuance is that the usual inscription on the icon contains the English text: Return to Top. Such text cannot be present on a Russian-language site, so you should simply 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 make the normal display of Russian letters.
Next we find the following line:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Return to Top"" |
and change the phrase in quotation marks to Russian. You can use phrases such as "Up!", "To the top!" or “Up!”.
At the end, you will need to save the modified file and check for the "up" button for the site on Joomla.
Up button for Ucoz
The "up" button for the site on Ucoz will have to be done using code injection, since it is impossible to connect plugins for this CMS. However, this does not require a long study of the system files and search for the necessary lines, you just need to paste a small code in the right place.
To install usrequired:
- go to "Control Panel -> Design -> Design Management (templates) -> Bottom of the site;
- insert 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, setting up a back up button for any of the CMS was not particularly difficult. You can use both an automated installation method (plugins) and a manual one. However, the latter option remains the most suitable, as it does not adversely affect the performance of the site.
You can use the "back to top" button for an HTML site to minimize the consumption of site resources, as a large number of extensions can have a negative impact on the performance of the resource. One "up" button plugin will not be able to greatly affect the loading time of the site pages, but in most cases the user has at least a dozen plugins installed on the CMS. In this case, any plugin can negatively affect the performance of the site pages.
