Plugin up button wordpress. Top Button for WordPress. Installation options. Animated up button

The wordpress top button plugins presented in this article create a button on the pages of the site, when clicked, the page will smoothly scroll 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

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

Dynamic “To Top” plugin settings include:

4 positions of the button "Up" on the site;
Appearance customization (color, shadow, border);
Upward speed selection;
It is possible to disable the mobile version;
Ability to add text to the button.

Screenshots of Dynamic “To Top” Plugin

Scroll To Top Plugin

Scroll To Top plugin official page ( https://wordpress.org/extend/plugins/scrollto-top/). Plugin for placing the button "Up" on the site. standard. English language.

From Settings

9 Positions of the button "Up" on the site;
4 button styles;
Ability to set your image for the button;
Replacing a button with a text link with a custom color.

Note: The sister of the Scroll To Top plugin, the Down button plugin called Scroll To Bottom. Plugin official page: https://wordpress.org/extend/plugins/scrollto-bottom.

Skysa Scroll-to-Top App Plugin

Skysa Scroll-to-Top Add official page (https://wordpress.org/extend/plugins/skysa-scroll-to-top-app/). Plugin for installing the Skysa panel at the bottom of the site pages. In the free version, only the "Up" arrow with a custom caption is installed in the panel.

The free version of the plugin has almost no settings. Only a bar with an arrow and a custom caption. Before buying the pro version, they give a 15-day period for testing.

Skysa Scroll-to-Top App plugin screenshots

Addition

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

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

Top or any other Text

All! Nothing more needs to be done.

Such an inscription "Up" does not conflict with plugins, it can be used as an additional "Up" button.

Other top button plugins wordpress

To supplement the information, I will give a list of 5 more plugins for the implementation of the "Go to Top" button on the site. Plugin support and updates 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/)
Front Scroll Top (https://en.wordpress.org/plugins/wpfront-scroll-top/)
M7 Go Top (https://wordpress.org/plugins/m7-go-top/)

Hello dear visitors!

I continue to publish technical articles.

And today I will touch on an interesting topic in which we will discuss the button to scroll to the top of the page on the site. We'll talk about the importance of this button, as I like to do. I will also show the most interesting and efficient implementations of this function.

Do you need

I think that it is not worth showing how it looks on sites, since almost every resource has it. This is a simple button with an up arrow or a word that, when clicked, will quickly move you to the topmost area of the site.

This function is a certain element that, in certain cases, improves the usability of the site. In which cases, we will now analyze with you.

The first most important, and maybe the only case when the up button is needed is the presence of a huge amount of content on the page. If the page is long, then it is rather difficult to scroll to the very top.

You either have to use the scrollbar, which is what few people use. At least I don’t use it at all, since this is an extra mouse movement, and it’s not very convenient. Or you have to turn the video on the mouse, which is very long and annoying over time.

Therefore, if your site has really large articles, then the button can be installed, but you need to make it so that it is easy to click on it and it is easier to do this than spinning the video or using the scroll bar in the browser. In another case, what would be the use of it if it was equivalent to standard actions?

Based on this, there are the most common and most powerful scroll up buttons that really work. One of these options is the up button, as in the social network Vkontakte. We are moving on to the implementation of this method.

Button up, like Vkontakte

A distinctive feature of this button is its ease of use. It looks like a scroll bar on the left side of the site, which occupies the entire height of the resource.

This option has already proven itself, since there are practically no users who do not use it on social networks. Vkontakte networks. This implementation is convenient in that you do not have to aim the mouse cursor at some button. Simply click on the left area of the site and the page will scroll to the very top. There is no need to even follow the cursor, you can simply move the mouse to the very edge of the screen and click once.

It will not work to make the exact same implementation as Vkontakte, but here's an approximate version - easily.

To implement it, you just need to place the script on the site.

To load the script, you can place the code itself between the tags or before the closing tag in the footer.php file. Or you can just upload the file with the script to the hosting, and then just upload the file on the site.

If you want to place the script and not suffer from downloading, then I give you the script code itself.

JavaScript

In this code, you can change some parameters for yourself.

Line 4 is responsible for displaying the area itself for scrolling the page. It contains the basic styles for displaying the button. In principle, these parameters should suit almost everyone. But you may need to edit them for yourself;
In line 7, in parentheses, there is the number 300, which is responsible for the moment the button appears. That is, the button will only appear after scrolling down 300 pixels. I recommend choosing a value here so that scrolling is possible only when the main menu of the site or some other important elements in the navigation disappear from view;
On line 17, the value 100 is the scroll speed. The smaller the value, the faster the return to the top of the page.

This code can be placed between tags at the top of the site. If the site is on WordPress, then this area is located in the header.php template file. Can also be placed before the closing tag at the very bottom of the site (footer.php file). I recommend the last option, as it will speed up the loading of the site. It will look like this.

An even more efficient option is to load this script from a separate file. The file can be downloaded from the button below. It is located inside the archive.

Then upload this file to the hosting. You can upload it to the theme folder, or you can upload it to the root of the site. I, by tradition, do this in the template folder. Then you should write in the same place the code that will load this file. To do this, use the following line.

JavaScript

In it, you will need to replace the path to the file with yours in the second line. Then paste this code in the same area before the closing tag as shown below.

After editing the file, if we did it on a computer, we upload it to the hosting with the replacement of the original file. After that, a simple up button on your site will work.

To edit the parameters in this file, you need to open it with the Notepad editor.

This option is very good for its simplicity, both in operation and in installation on the site. A more advanced option is when, in addition to scrolling up, it is possible to return to the place from which the scroll was made. It is this option that is implemented in the social. Vkontakte networks. How to do it, see below.

The second method of the button up from Vkontakte

According to this method, I recorded a detailed video tutorial.

This option is now on my blog. I have not yet been able to analyze its usefulness. But, if he stands on one of the giants of the Runet, then we can safely assume that there is some sense from him. Of course, on such a scale, this is a no-brainer. But on a small resource, you can think carefully before installing it. But I look to the future, that's why I made such a decision.

The implementation of the second method is a little more complicated, but the process should already be familiar to you if you have done other technical aspects on your resource.

Consists of 3 stages:

Placement of the script on the site;
Placing the code responsible for displaying the button;
Styling with CSS styles.

To begin with, we need to place a script that will make the scrolling smooth and change the color on hover, both of the area itself and the color of the "Up" owl, depending on the scrolling distance of the page down.

You can go 2 ways, as in the first case. Either place the script itself in the desired area (see paragraph above) or load the script through a file. Further, we will do everything through the second method, so that it is efficient.

Download the script file using the button below.

You place the file on the hosting and upload the file through the code at the very bottom of the site, as you did before. The file is named exactly the same as in the 1st method, so you can take the same line of code for output.

⇓ Back ⇑ Top

< div class = "leftbar-wrap" >

< a href = "#0" id = "scroll-back" >

⇓Back

< / a >

< a href = "#" class = "left-controlbar" >

⇑Up

< / a >

You can place it at the very bottom of the site, before the closing tag. in the footer.php file.

Then we register the design styles in our style file (style.css) and upload all the changed files to the hosting. Here are the styles.

/* description of the container */ .leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; ) /* description of the top button */ .left-controlbar ( height : 100%; display: block; text-decoration: none; ) /* back button description */ #scroll-back ( display: block; height: 100%; top: 0; display: none; text-align: center; ) /* background color column description for both buttons */ .active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* set background color transparency when hovering over active area page */ .leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* make the highlight a little brighter when hovering over the label */ .leftbar-wrap .active-area:hover ( ) /* center the label on the buttons */ .bar-desc-niz ( top: 26% !important; position: relative; display: inline-block; ) .bar-desc-top ( top: 10% !important; position : relative; display: inline-block; )

/* container description */

leftbar wrap (

position : fixed ;

height : 100%

top : 0 ;

width : 99px !important ;

left: 0

/* description of the "Up" button */

left-controlbar (

height : 100%

display : block ;

text-decoration : none

/* description of the "Back" button */

#scroll back (

display : block ;

height : 100%

top : 0 ;

display : none ;

text-align : center ;

/* description of the background color column for both buttons */

active-area (

width : 100px

height : 100%

display : block ;

text-align : center ;

/* set the transparency of the background color when hovering over the active area of the page */

Leftbar-wrap:hover .active-area{

background : #E1E7ED !important ;

opacity : 0.7 !important ;

/* make the highlight a little brighter when hovering over the caption */

Leftbar-wrap .active-area:hover{

/* center the label on the buttons */

bar-desc-niz (

top : 26% !important ;

position : relative ;

display : inline-block ;

bar-desc-top (

top : 10% !important ;

position : relative ;

display : inline-block ;

Depending on the design and structure of your resource, you will need to slightly change some of the parameters in these styles. For example, in lines 47 and 53, change the indentation of the words "Back" and "Top" from the very top of the page, respectively

After editing all the files, we can safely upload them to the hosting and this method will work. You can see its implementation on my blog. Do it for your health.

We move on to the next method. This option will already contain a simple button in the lower right area of the screen, clicking on which will move the top of the page.

The third way of the button to the top without a plugin

The implementation of the button is also very simple and works 100% on a WordPress site. As for the HTML of the site or another engine, I can’t say. Test.

You need to copy the following code with the script to the very bottom of the site before the closing tag/

JavaScript

< a href = "#top" > < / a >

The back to 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, so that each time you do not have to scroll the web page back to the beginning of the article or to the menu, developers advise adding an up button. It is located, as a rule, in the lower right corner and appears as it approaches 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 those who are poorly versed in web development issues. In addition, the modules have different settings for the implementation of various interesting features. And this, too, you will agree, is very useful. Of the 10 plugins found for the Back to top feature, I will only consider 4 that have a sufficient number of downloads and correspond to the current versions of the WordPress system.

Smooth Scroll Up

The lightweight and highly customizable Smooth Scroll Up plugin allows you to add an up 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. There are translations into different languages (Russian, Ukrainian yet).

Key features of Smooth Scroll Up:

Selecting different elements for the up button: text, image, button.
Position selection 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 homepage and mobile devices.
Adding an event on click.

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

Of these four top button plugins, 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 ones at the beginning or at the end of the article, they go as they become familiar. Everything, in principle, depends on your needs. If you are generally far from development and WordPress, then the easiest thing is to install Smooth Scroll Up and forget it. For those who want to tinker with the settings, the last two plugins will do. The first one is the newest at the moment. In general, there are plenty to choose from.

Hi all! When this blog was just starting out, I didn’t even think about such a convenient feature as scrolling the page up with one button. But, when voluminous articles appeared, I realized that such a button was sorely lacking. Who likes to scroll back up the entire article? Do up button turned out to be quite easy. There are two options here: the first is to use ready-made scripts, the second is to download the plugin. But first things first.

First, I made a static button in the footer of the site. It was a simple arrow image with a link. That is, it turned out that when you clicked, the page instantly jumped up, and a lattice was added to the site address. This, of course, is far from the best way, but the button looked nice, up lifted, so it fulfilled its function. The motto of the programmer: "It works - do not touch!"

However, after some time, I came to the conclusion that you still cannot do without a floating button. Moreover, I have seen such “up” buttons on many reputable (and not so) sites. So it is much more convenient to view the material, one click on the button - and the page instantly rises back up. And usability is an important factor in the design of any website.

Floating up button: how to add it using a plugin

Scroll To Up Plugin: Up button for easy navigation. Up Button in WordPress

As I said, the up button on the site can be added using scripts, using CSS and jQuery. On many sites, this is how it is implemented. But for WordPress, there is an easier way - the Scroll To Up plugin. It has various “up” buttons in ready-made variations. I love the convenience of a WordPress site – you can find plugins for just about anything!

Download Scroll To Up, with which we will add this very “up” button, through the WordPress console, then go to the settings. We see several tabs.

Here you can set the speed of scrolling up the page when you click on the button, the animation of the appearance Online, its position on the page. And most importantly - the type of button. This can be plain text, an icon, or an image of the up button, which you can choose from pre-made or upload your own. The plugin has a sufficient number of built-in button options.

If you don't like any of the proposed buttons, you can specify the path to any image in the Your Own Image tab.

The other tabs set the background color, font size and color, style. Each tab corresponds to a certain type of button. As you can see, customizing the button to perfectly fit your site is easy. Everything is quite simple and clear.

I even got into the code of the plugin itself and rounded the edges of the button so that it would look harmonious with my design, and the site became prettier. After digging into the code, you can mock the buttons as you like. Of course, no one forbids using scripts for WordPress, but the plugin is much easier to learn.

What a pity that there is no such function for managing your site: you poked it, and the pages themselves climbed up to the top of the search results

Hello dear site readers! I present to you and your attention 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 will explain why this button is needed at all and whether it is worth putting it. Let's get started!

What is the top button for?

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

That is why this function was created - raising the page to the top. And also, if the button is beautifully designed, then this is a plus for the design! And if you modify it, then it will be possible to release the page down when pressed, i.e. vice versa. That's it.

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

Installing a Button with a Plugin

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

Go to the "Settings" tab
—> Scroll to Top
And choose the appearance of the button from the proposed ones or upload your own
Click the "Update Options" button
Ready! The back to top button for WordPress has taken on a new look

Like this. You can also customize it, namely:

Location
Indentation
Speed
and other

Back to top button without plugin

We will now look at how 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 more and more.

To make a button, follow the instructions below:

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

Just make some changes, namely:

where your_site.ru is written - write the address of your site

where is the path to the image - enter the path to the image that will be the button

where image is the name of the image. If not .jpg, then change to the format that is set in the picture.

2. Open the file style.css, which is also located in the template folder, 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 throw in the root of your site.

4. Open the file functions.php located in the folder with the template and type in 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 button to the top for wordpress.

You have just read the article “Back to Top Button for WordPress” and installed it for yourself. How was it? Write in the comments! That's all for me, for now.

Sincerely, Konstantin Belan.