Top button for WordPress - quickly jump to the top of the page. Back to Top Button for WordPress

Hello, dear readers! Ever wondered how to make a Back to Top button for WordPress? No? Very in vain. After all, it is not only beautiful, but also very useful thing. This button appears in the lower right corner when scrolling down the page. Click on it, and the page smoothly returns to its beginning. You can implement such a spectacular transition to the top in WordPress using the Dynamic To Top Options plugin. I’ll tell you about it today.

You can set the number of announcements displayed on the main page and in blog sections. On many blogs, even 5-7 announcements are enough to make a page quite long. And in order not to irritate readers once again and not force the mouse wheel, an excellent function was invented - a button, after clicking on which, the page automatically scrolls up to its beginning. Simple, effective and convenient!

Of course, someone might look at this askance and say that this is unnecessary and only adds extra code to the page. In many ways this is true, but do not forget about the site’s usability, the behavioral factor and banal convenience. This trifle can hook the reader and keep him as a subscriber. But everyone will decide for themselves whether to install it or not.

Dynamic To Top Options are standard. Download the latest version, unpack and upload to the server in the /wp-content/plugins directory. Activate and go to the settings, which, unlike most other plugins, are located in the “Appearance” - “To Top” section.

All settings on English, but they are not difficult to understand. Now I will help you with this.

The first section of the settings is called Behavior, which means properties.

Scroll time—sets the time it takes to scroll the page to the top. Measured in milliseconds.

Fade-in distance - the distance from the top edge of the page, starting from which the “up!” button appears.

Easing - sets the smoothness of scrolling. If you don't look closely, it's hard to tell the difference, especially if the scroll time is set to a low value.

Position — position of the button on the page. There are 4 positions to choose from:

• top left - top left corner
• top right - top right
• bottom left - bottom left corner
• bottom right - respectively bottom right

Prevent on mobile—whether or not to display the up button in browsers of mobile devices.

All that remains is to edit appearance buttons in the Appearance section of the Dynamic To Top Options plugin settings. It is very convenient that all the changes made can be seen right there using an example.

Text version - allows you to write text on the button. After checking the box, the following fields will appear:

• Button text - text, use simple and understandable words - “Up!” “To the top of the page”, “To the top!”, “To the top”, “Up!”, “Let’s fly!” and so on;
• Font size - font size
• Text color — test color. Press select for visual color selection;
• Bold Text - bold style;
• Text shadow - shadow from letters;
• Text shadow color — shadow color.

Top/bottom padding - padding above and below from the text or image inside the button to its borders.

Hello, dear visitors!

I continue to publish technical articles.

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

I think it’s not worth showing what it looks like on websites, since almost every resource has it. This is a simple button with an up arrow or a word that, when clicked, quickly takes you to the very top area of ​​the site.

This function is an element that, in certain cases, improves the usability of the site. These are the cases in which we will now discuss with you.

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

You either have to use the scroll bar, which few people use. At least I don’t use it at all, since it’s an extra mouse movement and not very convenient. Or you have to spin the video on the mouse, which takes a very long time and becomes annoying over time.

Therefore, if your site has really large articles, then you can install a button, but you need to make it so that it is easy to click on it and it is easier to do this than spinning a video or using the scroll bar in the browser. Otherwise, what good will it be if it is equivalent to standard actions?

Based on this, there are the most common and most effective scroll up buttons that really work effectively. One such option is the up button, as in social network VKontakte. We move on to implementing this method.

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 media. VKontakte network. This implementation is convenient because you don’t have to aim the mouse cursor at any 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 watch the cursor; you can simply move the mouse to the very edge of the screen and click once.

It will not be possible to make the exact same implementation as VKontakte, but an approximate version is easy.

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

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

If you want to place the script and not have to worry about loading it, then I’ll give you the script code itself.

JavaScript

$(document).ready(function() ( $("body").append("^ Back to Top"); $ (window).scroll (function () ( if ($ (this).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click(function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this).animate (( "opacity":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")), function())( $(this).animate (( "opacity":"0.7" )).css(("background":"none","color":"#45688E"); ));

In this code, you can change some parameters to suit your needs.

• Line 4 is responsible for displaying the page scrolling area itself. It contains the basic styles for displaying the button. in principle, these parameters should suit almost everyone. But you may need to edit them to suit yourself;
• In line 7 in brackets there is the number 300, which is responsible for the moment the button appears. That is, the button will appear only after scrolling 300 pixels down. I recommend choosing a value here so that scrolling is possible only when the main site menu or some other important elements in the navigation disappear from view;
• In line 17, the value 100 is the scroll speed. The lower 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. You can also place it 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 download this script from separate file. You can download the file using the button below. It is located inside the archive.

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

JavaScript

In it you will need to replace the full 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 replacement source file. After this, a simple up button on your site will work.

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

This option is very good because of its simplicity, both in operation and in installation on the site. A more advanced option is when, in addition to scrolling up, you have the opportunity to return to the place from which you scrolled. This is exactly the option implemented in social media. VKontakte network. How to do it, see below.

By 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 it is on one of the giants of the Runet, then we can safely assume that it is of some use. Of course, on such a scale it’s a no brainer. But on a small resource, you can think carefully before installing it. But I look at the future, which is why I made this 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 issues on your resource.

Consists of 3 stages:

First, we need to place a script that will make scrolling smooth and color change smoothly when hovering, both the area itself and the color of the owl “To Top”, depending on the distance the page is scrolled down.

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

Download the script file using the button below.

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 method 1, so you can take the same line of code for output.

⇓ Back ⇑ Up

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

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

/* 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; ) /* 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 pages */ .leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* make the highlight a little brighter when hovering over the inscription */ .leftbar-wrap .active-area:hover ( ) /* center the button label */ .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 parameters in these styles. For example, in lines 47 and 53, change the indentation parameter for 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 to the top of the page.

The button implementation is also very simple and works 100% on a WordPress site. I can’t say anything about the HTML site or another engine. Test it.

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

JavaScript

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.

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. Latest update it 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.

Hello, dear readers. In this article I will tell you how to set the “up” button for WordPress blog. There are two ways to create this button. The first method is to install a special plugin. And the second is to change the php code in the files of your active theme.

By and large, you can easily do without this button. You already have this button on your keyboard, it’s called “home”. Clicking which will quickly take you to the top of the page.

Many webmasters install this button on their website. Some people install it to make it easier for users to navigate the site, but for others, it’s an integral part of the design.

1.Installing a button using a plugin.

The easiest way to make an up button is to install and activate the plugin. You can download it from the official plugin repository on wordpress.org. I recommend downloading plugins only from there, so you have less chance of infecting your site with a virus.

There are many plugins that allow you to add a button to the top, but I decided to choose the Scroll Back To Top plugin as an example. Download it, upload and activate.

The plugin has a number of settings. But you don't have to touch everything. All you need to do is customize the location and appearance of the button.

As you can see, there is nothing difficult in connecting a button to the top using a plugin, download it, activate it and everything works. Where could it be easier? But in reality, not everything is as good as it looks at first glance. The point is that with everyone installed plugin, your WordPress becomes thicker and slower, which is not good. Therefore, many experienced bloggers, whenever possible, try not to use plugins, but to edit the code directly.

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!

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.

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:

Like this. You can also configure it, namely:

• Location
• Indentations
• Speed
• and more

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 located in the folder with the template, and paste the code in front:

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 style.css file, 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 the verx.js file, which you need to add to the root of your site.

4. Open the functions.php file located in the template folder 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.