Scroll Back to Top is a WordPress plugin to add a button that appears only when users scroll down the page allowing them to scroll to the top of the page. The plugin comes pre-configured and is fully functional on activation. The plugin offers a number of webmaster-friendly features to completely customize the look, position, and animation. In addition, there is a setting to allow you to put the button in preview mode so it only appears when logged in, which is great for configuration, then fully enable it for everyone to see!

 
Download v1.1.3 of the Scroll Back to Top Plugin

Check out some custom button design inspiration
Check out the WordPress Scroll Back to Top plugin page

 

Settings Help

This is a walkthrough of each configuration option, designed to help you understand how the plugin works and how the different settings interact with each other. The configuration options are grouped by their basic function.

Visibility

Status

This setting will change the visibility of the button.

• Publicly Visible – enable the button for all to see
• Preview Mode – only displays the button for logged in users
• Disabled – completely removes the button from the public facing side of the site.

Minimum Browser Resolution

This setting is the minimum browser resolution to display the button. To restrict the button from
appearing in smaller browsers, increase the value of this from 0 pixels to a higher value.

Maximum Browser Resolution

This setting is the maximum browser resolution to display the button. To restrict the button from
appearing in larger browsers, decrease the value of this from 9999 pixels to a lower value.
 
 

Button Appearance

Width

This setting will change the width of the button. The measurement is in pixels.

Height

This setting will change the height of the button. The measurement is in pixels.

Background Color

This setting will change the background color of the button in it’s normal state. A helpful color picker is provided, but the value is a hex color CSS value, so it should look like #123456.

Background Hover Color

This setting will change the background color of the button in it’s hover state.

Foreground Color

This setting will change the foreground color of the button.

Foreground Hover Color

This setting will change the foreground color of the button in it’s hover state.

Opacity

This setting will change the transparency of the button.

Border Radius

This setting allows you to change the corners of the button. Entering 0 will make sharp, hard corners. Entering higher values will round the corner to that radius. This value is entered in pixels. Hint: if you want to create a circle button then set this value to be exactly half the width and height of the button.

 
 

Button Location

Horizontal Alignment

This setting will change where the button appears from left to right.

• Left
• Center
• Right

Vertical Alignment

This setting will change whether the button appears on the top or bottom.

• Top
• Bottom

Horizontal Distance from Edge

This setting is how far away from the left or right side the button is positioned. If the horizontal alignment is right then this setting will be the margin to the right side of the screen, vice-versa if horizontal alignment is left. If the horizontal alignment is set to ‘center’ then this setting has no effect. This value is in pixels. Hint: if you want to dock the button to the side of the screen then enter a 0 for this value.

Vertical Distance from Edge

This setting is how far away from the top or bottom the button is positioned. If the vertical alignment is top then this setting will be the margin to the top of the screen, vice-versa if vertical alignment is bottom. This value is in pixels. Hint: if you want to dock the button to the top or bottom of the screen then enter a 0 for this value.

 
 

Button Label

Label Type

This setting will change what appears on the button. Choose an icon to put on the button or choose custom text to add your own text.

• Arrow 1
• Arrow 2
• Arrow 3
• …
• Custom Text

Icon Size

If you chose an icon for the ‘label type’ setting then this will determine the size of the icon. If you chose ‘custom text’ then this setting is not available.

• 1
• 2
• 3
• 4
• 5
• 6

Custom Label Text

If you chose ‘custom text’ for the ‘label type’ setting then this is where you can enter the text to display on the button. If you chose an icon then this field is not available.

Font Size

If you chose ‘custom text’ for the ‘label type’ setting then this is how you can set the font size. Font sizes are in px. I have included a auto font-sizing javascript library with this plugin. To enable auto-sizing for the font size simply enter a 0 in this field and the plugin will handle the rest.

 
 

Animation Options

Scroll Duration

This setting determines how long it takes for the page to scroll to the top. Values here are in milliseconds. Note that 500-100 is recommended for the best results, but you can enter any value you like here.

Visibility Duration

This setting is the time the button will be shown after the user scrolls down the page. The default value of
0 means that the option is disabled and the button will not time out. A value greater then 0 milliseconds will
cause the button to timeout after the set amount of time has passed. If you choose to use this option I recommend
a value between 1500ms-2500ms.

Fade Duration

This setting will change how fast the button fades in and out of the screen after the scrolling threshold is reached. Values here are in milliseconds. Note that 500-100 is recommended for the best results, but you can enter any value you like here.

 
 

Advanced Options

Extra CSS

This is an advanced setting that requires CSS knowledge to use. You must add selectors in this field, your CSS should look something like:

.scroll-back-to-top-wrapper:hover {
    foreground-color:#FFFFFF
}

 

Check out some custom button design inspiration
Check out the WordPress Scroll Back to Top plugin page

 

Filters

2 filters are provided for overriding default plugin behavior.

sbtt_styles – The CSS that is added to the <head> element will be passed through this filter. Use this to add/change/remove some of the CSS.
sbtt_button_markup – The HTML markup for the button will be passed through this filter. Use this to add additional markup to the button.

  

Troubleshooting

It is possible for conflicts to be caused if your theme uses a version of font-awesome that is different from the version enqueued by the plugin. There are 2 solutions to this problem.

The first solution is to set the plugin to use “Custom Text” instead of an icon as the label. This may not be the most ideal solution, but if no icons are used then the plugin will not try to include the font-awesome library and will not cause a conflict.

A second solution is a little more code intensive. The plugin offers a filter for the HTML output of the button. The idea is to set the plugin to use “Custom Text” but then set the “Custom Label Text” text box to contain no text at all. This will not load the plugin’s version of font-awesome and will render an empty button. The next step is to apply the filter in your theme’s functions.php file to add the font-awesome icon manually. Here is an example of a code snippet you could include in functions.php to insert an icon into the button’s “Custom Label” area. This will use your theme’s version of font-awesome and cause no conflicts.

add_filter('sbtt_button_markup', 'my_scroll_back_to_top_filter');
function my_scroll_back_to_top_filter($text) {
  $text = str_replace(
    '<span class="scroll-back-to-top-inner">',
    '<span class="scroll-back-to-top-inner"><i class="fa fa-arrow-circle-up"></i>',
    $text
  );

  return $text;
}

The ‘<i class=”fa fa-arrow-circle-up”></i>’ is the icon for font-awesome. To see more options, including the icons I included in the plugin, go to http://fortawesome.github.io/Font-Awesome/icons/. I should also note that this is the recommended method to add your own icons from any icon library if needed to match a theme.