Back to top button for WordPress. Installation options

Hello, dear readers of the site! I present to you a new post in which I will talk about what the “Back to Top” button is for and how to install it on WordPress. Well, in the beginning, as always, I’ll explain why this button is even needed and whether it’s worth installing. Let's get started!

What is the Back to Top button for?

For example, you wrote a long article, the user read it to the end and now wants to go back to the beginning. I think this is a familiar situation. Isn't it true? But turning the mouse wheel and “pulling” the slider is not very convenient and takes a long time.

That's why it was created this function— raising the page to the top. And also, if you design the button beautifully, then this is a plus for the design! And if you modify it, then when you press it, you can release the page down, i.e. vice versa. Just like that.

Raising the page can be done both with the help of a plugin and without it. I'll explain both now. So be careful.

Installing a button with a plugin

The first thing you need to do is activate it. After which the button will start working. But the button image will be standard. I advise you to change it to your own. For this:

1. Go to the “Options” tab
2. —> Scroll to Top
3. And choose the appearance of the button from those proposed or upload your own
4. Click the "Update Options" button
5. Ready! The back to top button for WordPress has a new look.

Like this. You can also configure it, namely:

• Location
• Indentations
• Speed
• and more

"Back to top" button without a plugin

Now we will look at how to do back to top button for wordpress without using third-party plugins. Why no plugin? But because plugins slow down the site. I have already said this more than once (In the article - Adding videos to WordPress) and I will say it again and again.

To make a button follow the instructions below:

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

Just make some changes, namely:

• where it says your_site.ru - write the address of your site

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

• where picture is the title of the picture. If not .jpg, then change it to the format that is set in the picture.

2. Open the file style.css, which is also located in the folder with the template, and at the very end paste 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 extract it. It contains a file verx.js, which you need to add to the root of your site.

4. Open the file functions.php, located in the folder with the template and enter the code there:

// 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 your site has a back to top button for WordPress.

You have just read the article “Back to Top Button for WordPress” and installed it for yourself. What are your impressions? Write in the comments! That's all for now, everyone.

Best regards, Konstantin Belan.

The “back to top” button for a website has long been a mandatory attribute.

Judge for yourself, you are reading a rather long article. We’ve finished reading, now we need to go to the top of the site. You can do this using the slider in the browser, but, you see, it’s much more convenient to click the mouse and be at the top with a smooth, neat effect. A trifle, of course, but it’s precisely these little things that shape the attitude towards your site. And it’s more pleasant for yourself when you check an article, yes, or simply admire your site. If it's done with soul, of course.

Many modern themes already have built-in Back to Top button functionality. These can be arrows or inscriptions with text of your choice. Most of all, of course, a variety of arrows. Neat, elegant, they are always at hand, you can move to the top at any time.

There is, however, an opinion that for modern browsers There are already extensions where you can install such a button for any site. Yes, these extensions exist for both Chrome and Fox. But, keep in mind that different people come to your site. There are many IE fans; some simply do not want to install additional extensions on their browsers; others simply do not know about such possibilities. In short, it won’t hurt; it makes sense to spend some time improving the performance of your site.

Options for installing a Back to Top button for a site powered by WordPress

Setting the Back to Top button using a code.

Here I have my own opinion, which I will be happy to share with you.

There are many different options for installing the Top button, and much more, on your own. In principle, it is not difficult to write a few lines of code in necessary files. The only question is – WHY?

There is an opinion that unnecessary plugins make the site work harder and slower. Naturally, this happens. But, if you have already decided to make the necessary addition, then what difference does it make whether you write the code yourself, or whether it will be added after installing the necessary plugin? The number of commands will increase anyway; the script code will, in any case, require some resources for its processing. Only, in one case, you add the code manually, in the other, this addition is done by a plugin.

And don't forget this moment. You can install the code, it will work. But, first of all, how correctly will this continue after the engine update? Second, the plugin codes are constantly being improved. There is a discussion going on, a search for bugs and glitches is underway. Developers regularly update their plugins, so you are much more likely to have more optimized code from a professional developer than adding it yourself.

Well, basic convenience. You got tired of this version of the Back to Top button, deactivated the plugin, and installed another one. I liked it, it was great, no, they quickly activated the verified one. There’s no point in making a fuss over such a trifle; now you need to remember in six months what you wrote in the function.

I will not describe the installation method here using code; if desired, these options can be easily found on the Internet.

Scroll to Top Button plugin

This is probably the most popular plugin for adding a Back to Top button to a website today. A kind of classic of the genre. Installs and configures easily and simply.

Let's go to Plugins – Add new, paste into the search box Scroll to Top Button. We find, install, activate.

In the tab Appearance the item appears Scroll to Top Button, click and see the settings of this plugin:

There are only two of them. Color scheme– dark or light. Size– big or small.

We select the necessary parameters and admire how in the lower right corner, after some movement down, the Up arrow appears. Neat, smooth transition, in principle, nothing else is needed. The plugin is updated regularly, so the code will always be fresh and, judging by the reviews, will not have any effect on the speed of the site.

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

JCWP Scroll To Top Plugin

Here a completely different picture is observed. This plugin allows you to change the appearance of our button to your taste, color and size. Well, first things first.

Let's go to Plugins - Add new, insert into the search JCWP Scroll To Top, find, install, activate.

The plugin settings can already be found in another tab - Options — JCWP Scroll To Top:

I didn't put all the adjustable parameters in the picture; it would have been too long.

Almost everything is customizable.

• Animation duration;
• After what number of pixels does scrolling appear;
• You can make your own identifier for the button;
• Effect for button appearance;
• Button position;
• Text on the button;
• Setting the background color, font, letter size, frame color, rounding corners;
• Disable for mobile devices;

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

WPFront Scroll Top Plugin

Standard installation Plugins – Add new —WPFront Scroll Top . Download, install, activate.

You can find the plugin settings in the tab WPFront – Scroll Top:

Here we have a real Klondike for fans of graphic buttons. The choice is really decent, for every taste. There are simple arrows, and with inscriptions, and transparent, and dark, and light. Choose what you want.

• You can adjust the number of pixels for the button to appear;
• You can make your own button size;
• You can add transparency to the button;
• Smoothness settings for button appearance and for moving to the top;
• You can customize the appearance of the button for mobile devices;
• Setting the location and padding for the button;
• You can set the address to which the user will go after clicking the button. A strange option, although who knows, maybe it will be useful to someone;

The images are really nice. There are strict ones, and there are cheerful ones, for every taste.

These are the plugins that will help you easily create a necessary and useful Back to Top button on your website. Good luck everyone!

The WordPress top button plugins presented in this article create a button on the website pages that, when clicked, will smoothly scroll the page to the top. All plugins have settings. In the settings you can change the color, location and style of the button. All WordPress top button plugins work on sites connected to any Java Script library.

Dynamic “To Top” Plugin

Official page Dynamic “To Top” Plugin ( https://wordpress.org/extend/plugins/dynamic-to-top/). The plugin places a “Back to Top” button on the site. The plugin is installed. The plugin language is English.

Dynamic “To Top” plugin settings include:

• 4 positions of the “Back to Top” button on the site;
• Settings appearance(color, shadow, border);
• Upward speed selection;
• It is possible to disable the mobile version;
• Ability to add text to a button.

Screenshots of the Dynamic “To Top” Plugin

Scroll To Top plugin

Official page of the Scroll To Top plugin ( https://wordpress.org/extend/plugins/scrollto-top/). Plugin for placing a “Back to Top” button on a website. standard. Language English.

From Settings

• 9 Positions of the “Back to Top” button on the site;
• 4 Button Styles;
• Ability to set your own image for the button;
• Replacing a button with a text link with color settings.

Note: Sister of the Scroll To Top plugin, the “Down” button plugin is called ScrollTo Bottom. Official plugin page: https://wordpress.org/extend/plugins/scrollto-bottom.

Skysa Scroll-to-Top App Plugin

Official page of the Skysa Scroll-to-Top Add plugin (https://wordpress.org/extend/plugins/skysa-scroll-to-top-app/). Plugin for installing the Skysa panel at the bottom of the site pages. IN free version Only the “Top” arrow with a custom label is installed in the panel.

The free version of the plugin has virtually no settings. Only a bar with an arrow and a custom inscription. Before purchasing pro versions They give a 15-day period for testing.

Screenshots of the Skysa Scroll-to-Top App plugin

Addition

The simplest solution for the back to top button, there is no simpler solution

If you DO NOT need beautiful and “sophisticated” “Back to Top” buttons, but a simple inscription is enough, then just insert the following code anywhere in your website template (for example, footer.php) where you want to show the “Back to Top” inscription or any entry that is understandable to the user :

Top or any other Text

All! You don't need to do anything else.

This “Back to Top” inscription does not conflict with plugins; it can be used as additional button"Upstairs."

Other WordPress back to top button plugins

To supplement the information, I will provide a list of 5 more plugins for implementing the “Back to Top” button on the website. Support and updates for plugins are constantly changing, so we can only talk about them at the time of use.

• Scroll to Top Button (https://ru.wordpress.org/plugins/scroll-to-top-button/)
• Smooth scroll up (https://ru.wordpress.org/plugins/smooth-scroll-up/)
• LB Back To Top (https://ru.wordpress.org/plugins/backtop/)
• WPFront Scroll Top (https://ru.wordpress.org/plugins/wpfront-scroll-top/)
• M7 Go Top (https://wordpress.org/plugins/m7-go-top/)

(Latest update: 03.05.2019)

Hi all! Do you have it on your website? up button WordPress for smooth page scrolling? Not installed yet. Let's not put off installing the magic button until later, because the up button on the site is very convenient, especially for your visitors. It’s okay without it, it just infuriates me when it’s not on the site. You have to turn the wheel to return to the top of the page. Bad, very bad without a button. Webmasters need to care more about their visitors.

Buttons for smooth scrolling up in WordPress

Ladies and gentlemen, be more attentive to your readers, otherwise you will lose them forever.

Today I will introduce you to the best plugins with which you can install a Back to top (Scroll To Top) button on your website or blog. selected based on the highest downloads of modules by WP platform users. Let me remind you that all plugins can be installed in the standard way, from the admin panel, through the search and plugin loader. There is no need to download anything. Installed, activated, configured and that's it.

How to make an up button on a website. Plugins - Button Up for WordPress

We'll go first simple jQuery plugin Smooth Scroll

jQuery Smooth Scroll Plugin

This plugin automatically adds an up button after installing and activating the module. The up button will appear in the lower right corner of the site. As they say, set it and forget it. The plugin has already been installed more than 50,700 times. And this is what our button looks like:

Up button on WP site

Lightweight plugin Smooth Scroll Up - smooth scrolling up

Lightweight Smooth Scroll Up plugin

Smooth Scroll Up is a lightweight plugin that creates a customizable scroll to top feature on your WordPress site. The Smooth Scroll Up plugin has minimal settings. Choose from various types Scroll up elements - image, icon, text link, etc.

Options for configuring the Smooth Scroll Up plugin

The plugin is in Russian, so you won’t have any problems with the up button settings.

WPFront Scroll Top Plugin

Adding a scroll up button

The WPFront Scroll Top module allows the visitor to easily scroll back to the top of the page with fully customizable options and image. This plugin has more settings and, most importantly, a very large selection of icons (images) of the button itself. You can also do without a picture:

Setting up the WPFront Scroll Top plugin

And the button images themselves have plenty to choose from. Even if none of the button images on top suits you, you can provide a link to your button image:

Up button selection

Agree, this is a pretty decent set of images for a magic button. True, the plugin is English, but Google will translate. And here is an example of an installed button on the site:

Up button

Scroll Back To Top plugin - up button

Scroll Back To Top plugin

The Scroll Back To Top module also has a number of settings and options for how the button to the top will look:

Example of up buttons on a website

That's probably all. In my opinion, there are enough plugins with which you can install a button up on a WordPress site. The choice is yours, dear friends. I hope you enjoy this review. Good luck and see you later.

The top button is now present in many sites and helps users quickly return to the very top of the page. This is quite convenient if the site displays a lot of information. Therefore, in order not to have to scroll the web page back to the beginning of the article or to the menu every time, the developers advise adding a button up. It is usually located in the lower right corner and appears as you approach the end of the page. The option is quite interesting and not so difficult to implement.

You can, in principle, create a button to the top using certain scripts and editing the WordPress template, but there is an easier option - plugins. It is ideal for those who are too lazy to understand the code, or for those who are poorly versed in web development issues. In addition, the modules have different settings for implementing certain interesting features. And this, you see, is also very useful. Of the 10 plugins found for the Back to top function, I will consider only 4 that have a sufficient number of downloads and respond current versions WordPress systems.

Smooth Scroll Up

A lightweight and customizable plugin, Smooth Scroll Up allows you to add a top button to any post/page in WordPress. The module has been downloaded more than 40 thousand times; WP versions from 3.2 to 4.1 are supported. The last update was just recently. Translations available to different languages(Russian and Ukrainian are not available yet).

Key features of Smooth Scroll Up:

• Selecting different elements for the up button: text, image, button.
• Selecting a position for the Back to top element: left, right, center.
• Ability to specify any text for the top button.
• Specifies the distance from the top of the page after which the button appears.
• Animation when scrolling (scrolling, dimming).
• Show/hide on home page and mobile devices.
• Adding a click event.

Here are the parameters for the back to top button (color, border, background, transparency), and setting the location of the Back To Top element, and using images or text for it, plus animation options when scrolling, etc. Supported WordPress versions are from 3.0 to 3.9.2, the module has been downloaded more than 18 thousand times.

Of these four plugins for the back to top button, I would advise you to choose. Their order in the review is not a rating, that is, it does not mean that I considered the best at the beginning or at the end of the article, they go as I get acquainted. Everything basically depends on your needs. If you are far from development and WordPress at all, then the easiest way is to install Smooth Scroll Up and forget about it. For those who want to tinker with the settings, the last two plugins are suitable. The first one is the newest one on at the moment. In general, there is plenty to choose from.