Top button for WordPress - quickly jump to the top of the page. Up button for WordPress - quick transition to the top of the page Download up down button plugin

Many people want to have a “Back to Top” button on their website. This is an arrow that allows the user to go to the very beginning of the WordPress site with one click.

Personally, I think that such things are only necessary if the posts on the site are very long. After all, it will be inconvenient for the visitor to constantly use the slider or mouse! In this situation, the “Back to Top” button for a WordPress site is simply necessary!

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

The fact is that I had to experiment with about five plugins, and each had its own significant drawbacks. Finally, we 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 plugin search bar in your WordPress admin area. (If you don’t know how to do this, write in the comments, I’ll help).

It is strange that this set of characteristics is not present in many developments. However, it's good that at least one person has made a back to top button plugin for a WordPress site with flexible settings.

Hello, dear readers! Ever wondered how to make a Back to Top button for WordPress? No? Very in vain. After all, this is not only a beautiful, but also a 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 are in 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 the appearance of the button 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.

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 there are already extensions for modern browsers 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.

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 into the 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.

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.

Go to Plugins – Add New, insert Scroll to Top Button into the search box. We find, install, activate.

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

There are only two of them. Color scheme – dark or light. Size - large 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.

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.

Go to Plugins – Add New, insert JCWP Scroll To Top into the search, 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.

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

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

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!

Up button for the site - more than 7 proven solutions - 4.6 out of 5 based on 73 votes

The "Back to Top" button plays a big role in improving the user experience, especially on those pages that are heavily cluttered with content. And since nowadays the content for a site is the most important thing, there is, as a rule, more and more of it on the pages, and the best way to redirect the visitor to the top of the page are various special buttons; we will look at how to make a button to the top for your site in this article .

When a site page contains a large amount of content, the user, having read it and scrolled the page to a certain point or to the very bottom, often begins to scroll to the top to see the navigation links located at the top of the page and/or perform some actions.

To add convenience to users and generally improve the usability of your site, it is best to use a button up for the site, by clicking on which the user is automatically redirected to the top of the page.

There is a very simple way to provide the user with such functionality. This method does not require the use of any libraries or additional scripts and is done exclusively using HTML and, if desired, using CSS, by creating an ordinary internal link.

To do this anywhere at the bottom of your page, simply add the following code:

^Top

Example CSS code:

Topbutton ( width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font -family:verdana; font-size:12px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Flaws:

Buttons made using JavaScript can be floating and appear immediately as soon as the user moves a little down the page, but in the example above it will be displayed constantly.

Scrolling will not be smooth and after clicking the user will be instantly redirected to the top of the page.

The advantages of this type of button:

To operate the button, you do not need to use scripts or large libraries. And this is a very big plus.

The button is implemented quite simply. For its operation you will need the jQuery library, a small script containing jQuery events, certain styles and a DIV tag containing the text itself and the required ID.

The button works in browsers starting from versions Firefox 3.0.10 - 3.6.13, Internet Explorer 7 and 8, Google Chrome, Jquery 1.4.3. Unfortunately the button does not work in IE 6, but do you need it :)?

JQuery JavaScript code:

You need to insert the code below before the tag on all pages of your site. If the jQuery library is already connected to your site, then you do not need to add the first line.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(function() ( $("body,html").animate((scrollTop:0),800); )); ));

To give the button a beautiful appearance, you need to add the following styles. These are best added to your site's stylesheet.

#toTop ( width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* button indent from the bottom edge of the page*/ right:10px ; cursor:pointer; color:#333; font-size:11px;

To call the button, add the following HTML code before the tag.

^ Top

A simple plugin that makes a button appear smoothly and scroll up smoothly when you click on it. To use the plugin on your site, you do not need to add any tags to the HTML markup of the page. Just connect all the necessary plugin files and it will work.

Sources

The presented archive contains 3 folders: css - button style file, img - image and js folder which contains 4 JavaScript files.

Connecting JavaScript files:

Unpack the downloaded archive with sources into any folder on your site. To use the plugin, we just need to connect three of the available js files. To include them, add the following file paths before the closing tag:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" ));

Correct the paths leading to the files in accordance with the directory in which the plugin files are located.

Please note that if you have previously connected the jQuery library to your site, then you do not need to add the following code:

Adding CSS:

The next step is to add CSS styles, without them the button will not work. There are two ways to connect them.

The first way is to add a link to the CSS style file between tags on all pages of your site:

Just remember to change the file path.

The second way is to copy the entire contents of the ui.totop.css file and paste it into your site's CSS stylesheet file. The second method will be more rational since it does not require connecting unnecessary files.

This solution allows you to move both down and up the page because it consists of two buttons. The buttons are fixedly located on the left side of the page. When scrolling, the buttons flicker smoothly. You can see this effect by viewing the demo.

Sources

The downloaded archive will contain all the files necessary for the button to function. These are CSS, JS files and arrow image files.

Connect HTML:

First you need to place the HTML code for calling the buttons on all pages of the site. To do this, place the text below immediately before the tag.

JavaScript connection:

Immediately after the HTML code, before the tag, place the code for calling the necessary JavaScript files and JQuery code.

$(function() ( var $elem = $("#content"); $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); $(window).bind ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"1")); )); $("#nav_down").click( function (e) ( $("html, body").animate((scrollTop: $elem.height()), 800); )); $("#nav_up").click(function (e) ( $( "html, body").animate((scrollTop: "0px"), 800 ));

The paths leading to the JS files must be replaced with your own.

The first line of code includes the JQuery library, so if you have already connected it to your site before, then you need to remove it.

Next comes the connection of another JS file and code containing certain functions that need to be considered in more detail. Because with their help you can change some parameters of the buttons. Below is the code with explanations:

// content is the identifier of the div inside which all the content that should be scrolled should lie. If all the content of the pages of your site lies in a different id, then you can enter it here, because without this the buttons will not work $(function( ) ( var $elem = $("#content"); // using the next two lines, the buttons are shown $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn(" slow"); // when scrolling, the buttons have a fading effect, this is implemented by changing their transparency, so by changing the indicator 0.2 in the range from 0.1 to 1, you can adjust their transparency $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("opacity":"0.2")); )); // here you can adjust the same transparency, but at the moment when the buttons are pressed are simply displayed on the page, the default value is 1 $(window).bind("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("opacity":"1" )); )); // by changing the number 800 you can increase or decrease the page scroll speed up $("#nav_down").click(function (e) ( $("html, body").animate((scrollTop: $elem .height()), 800); )); // same as above but for scrolling down $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) ); ));

CSS connection:

In order to add CSS, simply connect the style.css file located in the source archive to the site pages:

And the best option would be to copy the styles of this file and paste them into the styles file of your site.

Another option for organizing smooth scrolling of page content, from bottom to top, using JQuery. The button is located at the bottom right of the page and appears only if you scroll down the page a little. Everything is implemented using a small piece of CSS and JS code, as well as a small image used as a button.

I like this button because its creation does not require a large number of scripts and it has good effects.

Now let’s figure out what needs to be done to connect the button to the site

Image:

You will need an image of the button itself, you can take any, or you can use this:

To call a button after the main page content or before a tag, place the following HTML code:

Top

Scrollup( width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") no-repeat ; )

Using this code, in addition to the appearance, we determine the position of the button and set the padding to 100 px from the right and 50 px from the bottom. It's best to add it to your site's stylesheet.

First, we connect the library if it is not already connected for your site. For this purpose between tags...? insert the following:

Then, immediately after including the library, you need to place the following JQuery code:

$(document).ready(function())( $(window).scroll(function())( if ($(this).scrollTop() > 100) ( $(".scrollup").fadeIn(); ) else ( $(".scrollup").fadeOut(); ) ); $(".scrollup").click(function())( $("html, body").animate(( scrollTop: 0 ), 600) ; return false; ));

The first ScrollTop - determines the current vertical position of the scroll bar and if it becomes more than 100 px, the button automatically appears. If you want it to appear earlier or later, change this value as necessary.

As you can see, there are two more parameters - 0 - which means the page will scroll up to the very beginning to the zero pixel, and 600 - this is the animation speed in milliseconds.

Source: http://gazpo.com/2012/02/scrolltop/

When you scroll the page a certain number of characters down, a large button with an arrow appears at the bottom left. When you hover the cursor, the button smoothly lights up, and when you click, it scrolls smoothly up.

An arrow image, CSS styles and JQuery are used to create the button.

Image:

HTML code:

To call the button, use the following HTML code:

Back to Top

But you need to place it immediately before the main content of the page; if you place it before the closing tag, the button will not work.

And one more important point regarding the HTML code. You must assign the identifier top to the tag.

If the tag has already been assigned a specific id, then in the button calling code located just above, #top must be replaced with #your-id

The padding and appearance of the button were set using CSS; a transition property was added to create a delay effect when hovering the cursor. It is better to insert it into the CSS file of your site.

#back-top ( position: fixed; bottom: 30px; margin-left: -150px; ) #back-top a ( width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica , sans-serif; text-decoration: none; /* transition */ -moz-transition: 1s; a:hover ( color: #000; ) /* arrow icon (span tag) */ #back-top span ( width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url( up-arrow.png) no-repeat center center /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; /* transition */ -webkit- transition: 1s; -moz-transition: 1s; transition: 1s; ) #back-top a:hover span ( background-color: #777; )

$(document).ready(function())( // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () ( $(window ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut (); ) )); // scroll body to 0px on click $("#back-top a").click(function () ( $("body,html").animate(( scrollTop: 0 ), 800 ); return false; ));

The first line is connecting the JQuery library, if you already have it connected, then do not add this line. Add the rest of the code between the tags...

If necessary, you can change the following parameters:

• 100 is the number of pixels after which the button appears after scrolling;
• 0 - this means that scrolling will be done to zero pixel, i.e. to the very top.
• 800 is the scrolling speed in milliseconds.

A large translucent up button appears when scrolling in the center of the page. It's hard not to notice her. Made only using JQuery and CSS.

Let's understand HTML:

For the button to work, the main page content that needs to scroll must be placed between two tags:

There is nothing special here, just paste this code into your site's CSS style file.

#message a ( /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; /* link doesn't hide text behind it */ opacity : .8; /* link stays at same place on page */ position: fixed; /* link goes at the bottom of the page */ top: 100%; margin-top: -80px /* = height + preferred bottom margin */ /* link is centered */ left: 50%; margin-left: -160px; /* = half of width */ /* round the corners (to your preference) */ -moz-border-radius: 24px ; -webkit-border-radius: 24px; /* make it big and easy to see (size, style to preferences) */ width: 300px; height: 48px; #000; font-size: 24px; text-align: center;

$(function () ( /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () ( if($window.scrollTop()