What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Create a Scrolling Back to Top Button in WordPress

How to Create a Scrolling Back to Top Button in WordPress

A scrolling back to top button brings visitors from the bottom of a page to top with a click. That is a practical way to go back to the top with one action, in particular with someone visiting the web page with a long post. To provide convenience for you visitors, follow this guide on how to create such a button in WordPress.

The selected method is Scroll Back To Top plugin and that creates a scrolling back to top button for your website without any knowledge of CSS or HTML. By the way, we would like to brief you on the way to do the same thing with jQuery and style the button with CSS & HTML at the end of this article. It is an alternative offer for method one.

Method 1: Add a Back to Top Button in WordPress with Plugin

Install Scroll Back To Top plugin on your site via WP admin > Plugins > Add New. Upon activation, you should be involved in the use of multiple features for customization of button appearance and position.

Install Scroll Back To Top Plugin

Since you have this plugin activated, a scrolling back to top button appears on every page of your website. That should be like the following screenshot. If you think that this button looks dull and unappealing, move to the following section to enable a unique design for the button.

Back to Top Button Sample

A new item called Scroll Back to Top comes under Settings and this is where to customize visibility, appearance, location, label and animation of this button. Go to Settings > Scroll Back to Top and access to the Scroll Back to Top Settings page. Before everything, three options for visibility status customization are included in the Visibility mode. You are required to select a status from three options.

The “Publicly Visible” allows all visitors to view this button once you have the Scroll Back To Top plugin activated on website. However, if you plan to customize the button design before making it public, the “Preview Mode” should be in action. The “Disable” option is used to hide the button and directs visitors to the top of the current page with a “Back To Top” link. And then, reset the minimum and maximum browser resolution if needed.

Visibility Settings

Next, set about customizing the look of the back to top button via Button Appearance mode. Adjust the width and height of this button to make it match with all web pages properly. Select color for background and foreground of this button and that should be according to personal needs.

Here, we suggest you to set the foreground color lighter than what for the background. Besides, the Opacity and Border Radius are also required options.

Button Appearance

Move to Button Location mode. That enables you to determine where to locate your scrolling back to top button. Set the horizontal alignment and vertical alignment from given options. The default location is on the bottom right corner of each web page. And then, adjust the horizontal & vertical distance from edge as needed.

Button Location

Choose an icon appearing on the button from Button Label mode. There are 11 icons available for you to choose from and that also allows you to set the icon size if needed. Since no icon can satisfy your needs, check the “Custom Text” option and enter anything that will be shown on the button in the “Custom Label Text” field. Set the font size if needed or leave it “0” to enable auto-size text.

Button Label

The Animation Options mode is where to set how long it takes to scroll back to top since visitors press the button and how long it takes to fade the button in and out. The Visibility Duration specifies the deadline of your button and that allows you to set “0” to never stop the button.

Animation Options

What’s more, the Advanced Options leaves enough room for extra CSS and that is great for styling your back to top button as you want. Leave it blank unless you have good knowledge of CSS. Click “Save Changes” button when having all settings done. You can go back to modify any settings as needed or start all over again by clicking “Restore Default Settings” button.

There are some other popular WordPress plugins design for the same purpose, such as Back To Top, WPFront Scroll Top, WP Scroll To Top, and so on. Make up your mind and select a suitable method to create a unique scrolling back to top button.

Method 2: Add a Back to Top Button in WordPress with jQuery

If you are familiar with HTML code & CSS and think the first method is not your cup of tea, go with the following guide on how to create a back to top button with jQuery. First of all, you need to create a button with shortcode and that can be inserted in anywhere on your website. For example, we name our back to top button as Back To Top and set the shortcode as below.

<a href="#" id="backtotop">Back To Top</a>

Take a good use of the following CSS to style your back to top button and replace certain parameters to adjust the button size, position, alignment, etc. Since you have all changes done, add the CSS to style.css file via WP-admin > Appearance > Editor. Update file and adjust certain arguments if the button cannot match with your website. Replace the URL of background image to the right one.

#backtotop
{
	width: 50px; 
	height: 50px;
	padding: 10px; 
	text-align: center; 
	background: white;
	color: #333;
	text-decoration: none;
	position:fixed;
	top: 30px;
	right: 20px;
	display:none;
	background: url("{Back to top icon URL}");
}
#backtotop:hover
{
	text-decoration:none;
}

Since the display is set to “none”, the back to top button cannot appear on website unless we make use of the following jQuery code. Here requires you to create a file for holding the jQuery code and name it properly. For instance, we save a file and name it as backtotop.js by using File Manger via cPanel.

Access to cPanel > Files > File Manager and go to public_html/wp-content/themes/theme-name/js. Create “New File” and name it as anything as planned.

Create js File

Copy and paste the following code to this newly created file and replace certain parameters according to personal needs. The “scrollTop” function works when visitors click to go back to the top of the current page. The “fadeIn” and “fadeOut” functions are used to customize the fade duration for this button. Save file and check if this newly created button matches with your site properly.

$(document).ready(function()
{
	$(window).scroll(function()
	{
		if ($(this).scrollTop() > 100) 
			$('#backtotop').fadeIn();
		else 
			$('#backtotop').fadeOut();
	});
	
	$('#backtotop').click(function()
	{
		$('html, body').animate({ scrollTop : 0 }, 800);
		return false;
	});
	
});

Frankly, jQuery enables more flexibility to customize your back to top button and that should be a solid option for someone having good knowledge of jQuery. However, if you are not one of them, then you’d better go with a rich-featured back to top plugin and select one from the recommended options in the first method.

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *