WordPress Making Down button. Up button for WordPress - a quick transition to the top of the page. UitoTop jQuery plugin

The "Up" button for the site has long become a mandatory attribute.

Judge yourself, you read a fairly long article. Read, now you need to go to the top of the site. You can do this using a slider in the browser, but you will agree, much more convenient to click on the mouse and turn out to be at the top with a smooth, neat effect. A trifle, of course, but, just from such little things and is a relationship to your site. And the most pleasant thing is when the article is checked, yes, or simply, you admire your site. If the soul is made, of course.

Many modern topics already have built-in functions of the button up. It can be arrows, and inscriptions with text to your taste. Large all, of course, a variety of arrows. Neat, elegant, they are always at hand, at any time you can move to the top.

There is, however, the view is that for modern browsers there are already extensions where you can install such a button for any site. Yes, these extensions are, and for chromium, and for fox. But, consider the fact that people come to your site different. Many fans of IE, someone, simply do not want to install additional extensions on their browsers, someone simply does not know about such opportunities. In short, it will not be superfluous, it makes sense to spend some time to improve your site.

Installation options Top for site on WordPress engine

Installing the button up using code.

Here I have my own opinion, with pleasure I will share with you.

Many different options for setting the button upstairs, and a lot more than anything else. In principle, it is not difficult to register a few lines of code in files. The question is just - why?

There is such an opinion that the extra plugins are driving the work of the site, make it slower. Naturally, this case takes place. But if you have already decided to make the desired supplement, what's the difference, do you write code yourself, or will it be added after installing the desired plugin? The number of commands and so will increase, the script code, in any case, will require some resources for its processing. Only in one case, you add code with your hands, in another, this addition makes the plugin.

And do not forget this moment. The code can be installed, it will work. But, the first, how correctly it will continue after updating the engine? The second, plug-in codes are constantly improved. There is a discussion, there is a search of bugs and glitches. Developers regularly update their plugins, so that much more chances have a more optimized code from a professional developer than after self-adding.

Well, elementary convenience. Tired of you this option of the button upstairs, deactivated the plugin, installed another. I liked it, wonderful, no, quickly activated verified. It makes sense because of such a little thing a garden to be lined, here it is necessary, after six months, remember that you prescribed in the function there.

I will not describe the way to install the code, if you wish, on the network, these options are easily searched.

Scroll to Top Button plugin

This is probably the most popular plugin to add the button to the top to the site today. A kind of classic genre. Installed and configured easy and simple.

We go B. Plugins – Add new, in the search box insert Scroll To Top Button. We find, install, activate.

In the tab Appearance Point appears Scroll To Top Button, Press and see the settings of this plugin:

There are only two of them. Color scheme - Dark or bright. The size - big or small.

Select the desired parameters and admire how in the lower right corner, after some movement down, the arrow appears to the top. Neat, the transition smooth, in principle, nothing else is needed. The plugin is updated regularly, so the code will always be fresh and at the speed of the site, judging by the reviews, there will be no influence.

Let's not stop at one plugin, let's see what else you can find for our button upstairs.

Plugin JCWP Scroll To Top

Here is a completely different picture is observed. This plugin makes it possible to change the appearance of our button to your taste, color and size. Well, in order.

We go to the plugins - Add newInserted in search JCWP SCROLL TO TOP, Find, install, activate.

The settings of the plug-in can already be found in another tab - Parameters — JCWP SCROLL TO TOP:

I did not post all customizable parameters in the picture, it would be too long.

Almost everything is configured.

• The duration of animation;
• Through how many scroll pixels appears;
• You can make your identifier for the button;
• Effect for the appearance of the button;
• Button position;
• Text on the button;
• Setting the background color, font, letter size, frame color, corners rounding;
• Disconnection for mobile devices;

These are the settings. As you can see, we will not have a ready-made image of the button, it will be formed by those styles that we task. A convenient solution, suitable, practically for any design, interesting effects for the appearance.

Plugin WPFront Scroll Top

Installation standard Plugins – Add new — WPFRONT Scroll Top.. Download, install, activate.

You can find the plug-in settings in the tab. Wpfront – Scroll Top.:

Here we have a real klondike for lovers graphic buttons. The choice is really decent, for every taste. There are just arrows, and with inscriptions, and transparent, and dark, and bright. Choose what you want.

• You can configure the number of pixels to appear the button;
• You can make your size button;
• Button can add transparency;
• Smooth settings for the button appear and to move upstairs;
• You can configure the appearance of a button for mobile devices;
• Setting the location and indents for the button;
• You can set the address for which the user passes after clicking on the button. A strange option, although, who knows, can come in handy to anyone;

Images, really, cute. There are strict, there are cheerful, for every taste.

Such plugins will help you easily and easily make the desired and useful button on your site. Good luck to all!

All that is required from the webmaster is that his site be convenient for the use of them does not cause depression from visitors, and the template did not interfere with users quietly study the resource materials. If you use the non-modified theme Wordpress, most likely, you will not get to make a convenient site, since the default buttons for WordPress are not installed - they must be additionally downloaded and activated. After all, so that the user can conveniently read articles and flip the contents, the "Up" button must be on the site.

The "Up" button is a small arrow icon, when you click on which the page quickly scroll up.

Thus, if the user began to read the article or decided to see what they write in the comments, he would not have to suffer from the site scrolling up. Instead of using the standard scrolling of the browser, it will click on the button "Up" icon, and smoothly moves to the top of the page. It is very convenient and practically a prerequisite for any "long" (if the resource pages of this length that they have to scroll) of the site. This article will consider plugins to add the button "Up".

jQuery Smooth Scroll is a convenient and fast module to activate the up button on the site. To add such a button to the resource, just download and install the plugin. Immediately after activation, the side of the pages appears a small floating button. With it to read long articles and flipping the page will be much easier. Button has stylish design, and not lost against the background of the WordPress template.

And if you know the features of CSS programming language, you can independently configure the up button at your own discretion. In general, the JQuery Smooth Scroll plugin is enough to satisfy the needs of most webmasters, but further a few more popular tools In case this module does not work.

Smooth Scroll Up.

Next, no less popular Smooth Scroll Up plugin is an extremely simple and understandable tool, which in minutes will allow you to create the "upstairs" icon in the lateral part of the site. Although there is no multiple settings in the module, it is quite functional. The following are the main features of the SMOOTH Scroll Up plugin:

• you can choose between different types element "up" (text with link, icon, image and so on);
• the scroll element can be chosen independently from your own collection;
• you can add your own comment near the scroll button up;
• the location of the site on the site is regulated (if necessary, only to conveniently read the page, it is better to place on the right side, but the plugin allows it to be located on the left side, and in the center);
• you can add exceptions to display in different parts of the site (Disable the display of the button "Up" on the main one, or deactivate on any other page);
• the module works on mobile versions of the site (for need, for the phone, the "Up" button can be removed);
• there are animations for scrolling (Slide and Fade, or without an animation effect);
• you can specify the distance after which the "Up" button appears (it is more convenient to read, because the item will not be a stupid to appear immediately after entering the site, but to be displayed only at the right time);
• the "Up" button you can lay a link to open the page in the new tab;
• there is an opportunity to add your own cSS Parameters For the element.

WPFRONT Scroll Top.

This plugin is perfect for those who do not want to think independently over what button will be. If you just want that users it was easier to read and view the materials, and at the same time have an interesting scroll button, then WPFront Scroll Top - just what you need. The module contains a large collection of finished icons. And if you do not want to dilute the user's attention to the "Next" icon, you can simply add text to scroll without an image.

The WPFront Scroll Top plugin is easily installed on the WordPress engine. It contains a lot of settings, such as:

• activation / deactivation of the button;
• size icons;
• degree of transparency;
• scroll speed;
• adding an automatic hide button through a specified number of seconds;
• passage Alt tag for item;
• color and background design of the button of the button (the main thing is to read the inscription it was convenient, it must be expressive).

Note that the presented tool does not apply to Russian. But because there is nothing to read in the settings, there should be no difficulties in use.

Scroll Back to Top

Next, another plugin that will improve "Usability" of your resource - the Scroll Back to Top tool. It also contains many settings. You can deactivate an element at any time, make it an opaque or create a preview of the icons. The size and color of the element is easily adjustable. You can configure the distance from the "Top" of the site, after the passage of which the button appears. Location of the element in the left, right side and in the middle of the page.

Scroll Back to TOP plugin does not contain large number Types of icons. There are only about 10 of them. You can turn off the icon for need and leave the text ("Next", "up", etc.). The size of the icons is adjustable by a special scale from one to six. To activate individual style in the element parameters there is an "Extra CSS" item to add your own design.

Dynamic "To Top" plugin

This is an English module to place the button "Top" in almost any position on the site. To read and flipping the page much easier, because the button can be placed in one of four positions. Plugin is configured by english language. The button can be activated / disabled for mobile version resource. Scroll speed is adjustable.

Interestingly, plug Dynamic "To Top" Plugin works with caching, because permanent users will be able to read your posts and scroll through the pages without delaying the browser. The module is perfectly displayed on computers and new, and old generation.

Skysa Scroll-to-Top App

Next, Skysa Scroll-to-Top App is a plugin that is absolutely similar to its competitors. You do not just add the button up using it, but also you can use this tool to create a whole bar of widgets. For example, you can add a floating block with voting, buttons social networks and scrolling page. And so that the plugin does not slow down the work of the site, it works with browser cache. Capabilities this module Practically not limited - you can even add links to the bar with the scroll button.

Output

Download one of these additions is nothing worth it for you. But for the site it will bring huge benefits. The "Next" buttons, "Top", "Back", etc., will greatly make it easier for life to visitors to the resource. Believe me, they will be grateful! And with them - both search engines, as the site is more convenient, the higher its position in the search.

Greetings, friends! In this article I want to show you how to make a button "Up" Online. This button will be useful on sites with long articles or pages. When you click on the "Up" button - Page return up, To the main menu (site cap).

Usually, to install such a button, everyone wants to download as quickly as possible the plugin and are not particularly bored, but I don't think that you need to litter the site a bunch of unnecessary plugins when you can do everything very easily and just without using plugins.

The lazy can create a button with many plugins, for example Scroll to Top. or WP SCROLL TO TOP 😉

You can remember how to find and install the plugin in one of.

Creating the "Up" button without plugins

Set the button is very simple, in just a few simple steps.

1. Open the file function.php..

Open function.php. can be in two ways:

• To open with text editor In the root folder of your topic
• Go to Appearance -\u003e Editor and choose to edit Functions.php (functions.php)

2. Copy and paste the code below at the bottom, in front of the closing tag. ?> .

Gif "/\u003e"; ) Add_action ("WP_Head", "Back_TO_TOP_STYLE"); FUNCTION Back_TO_TOP_STYLE () (ECHO "";) add_action (" WP_FOOTER "," back_to_top_script "); function back_to_top_script () (Echo""; }

3. Save the changes and admire the button you created. "Up".

And now, predicting your questions, I will try to answer them in advance!

And so, in this example We put an image on the button. In order to remove the image and put text - Replace in the code of our example stitch 3. on the:

Echo "up";

To replace the image of the button - replace link The image you need in the line 3.

The button will be displayed when we drop on the page more than 400 pixels down From the header of the site, and will hide if we rise above. Change the height at which the button will appear quite easily, for this you need to replace the value of 400 to the height you need to the altitude of the code:

If ($ (this) .scrolltop ()\u003e 400)

If something has not happened, boldly write in the comments! And if it happened - share your impressions 🙂

Greetings, friends! In this article, I want to show you how to make the "Up" button on the site. This button will be useful on sites with long articles or pages. When you click on the "Up" button, the page will return up to the main menu (site cap). Usually, to install such a button, everyone wants to download as quickly as possible the plugin and are not particularly bored, but I do not think that it is necessary to climb the site a bunch of unnecessary plug-ins when you can do everything very easily and simply without using plug-ins. The most lazy can create such a button with many plug-ins, for example Scroll to top or WP Scroll to top;) Remember ...

Many want to have "up" button on their website. This is such an arrow that allows the user to rise to the very beginning of the WordPress site by one click.

Personally, I think that such things are needed only if the posts on the site are very long. After all, the visitor will be inconvenient to constantly use the slider or mouse! With such a situation up Button for WordPress Site Just needed!

You can implement this idea with help. I offer only one, and now I will explain why.

The fact is that I had to conduct experiments somewhere with five plugins, and everyone had its essential flaws. Finally managed to find a decent option that is simple and convenient in every sense.

We are talking about a plugin for the up button - TOTOP LINK.. You can download it through the official search string Plugins in your WordPress Admin. (If you do not know how to do it - write in the comments, I will help).

The main advantages of TOTOP LINK

1. The ability to add your image to the standard Up Arrow;
2. Adjustment of the scrolling speed;
3. More than 4 positions arrow on the screen;
4. The ability to add text;
5. Restricting the Up Arrow for Little Screens.

It is strange that this set of characteristics is not present in many developments. Nevertheless, it's good that at least one person did plugin Buttons "Up" for WordPress Site With flexible settings.

Hello, dear readers site! I present to you and your attention a new post in which I will tell you about what you need the "up" button and how to install it on WordPress. Well, at the beginning, as always, I will explain why this button is generally needed and whether it is worth putting it. Start!

Why do you need a button up?

For example, you wrote a long article, the user read it to the end and now wants to return back to the beginning. I think the familiar situation. Is not it? And to twist the mouse and "pull" for the slider - not very comfortable and long.

That is why this feature was created - raising the page to the top. And also, if you beautifully place a button, then it is a plus to the design! And if you still modify, then you can join the page down, i.e. On the contrary. That's how.

Page raising can be carried out both with the plug-in and without it. I will explain now, and the one and the other. So be careful.

Installing a button with a plugin

The first thing to do is and activate it. After that, the button starts to work. But the image of the button will be standard. I advise you to change it to yours. For this:

1. Go to the "Parameters" tab
2. -\u003e Scroll to top
3. And select the appearance of the button from the offered or download your
4. Click "Update Options"
5. Ready! Button up for WordPress accepted a new look

Like this. You can also customize it, namely:

• Location
• Deputies
• Speed
• and other

Button "Top" without a plugin

Now we will look at how to make top for WordPress Without using foreign plugins. Why without a plugin? And because the plugins slow down the site work. I have already said more than once (in the article - add video to WordPress) and I will talk yet.

In order to make the Follow the instructions below:

1. Open the file footer.php.which is in the folder with the template and insert before the code:

Just make some changes, namely:

• wHERE WRITTEN YOUR_SYT.RU - Write the address of your site

• where the path to the picture is to enter the path to the picture that will be button

• where the picture is the name of the picture. If not.jpg, then change the format that is installed in the picture.

2. Open the file. style.css.which is also located in the folder with the template, and at the very end insert the following code:

#Totop (width: 100px; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; Cursor: Pointer; Color: # 666666; Text-Decoration: none;)

3. Download and unpack it. It lies the file verx.js.to be thrown into the root of your site.

4. Open File functions.php., located in the folder with the template and drive the code:

// Smart JQuery Inclusion If (! is_admin ()) (WP_Deregister_Script ("jQuery"); wp_register_script ("jquery", ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ), false); WP_ENQUEUE_Script ("jquery");)

5. Well, that's all! I can congratulate you, now on your site there is a button up for WordPress.

You just read the article "Button Top for WordPress" and installed it yourself. What did you think of it? Write in the comments! I have everything on this, so far.

Sincerely, Konstantin Belang.