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.

17 comments on “Scroll Back to Top WordPress Plugin

  1. wallie says:

    Hello,
    is there a possibility to center the button vertically on the left side of the page independent of resolution?
    greets

  2. m says:

    Hi!
    Love your script!
    But would be great if you add an option, when the button shall appear.
    I mean how far/many px must a user scroll, before the button appears on screen.

    best
    m

  3. Andre says:

    Hi, I’m trying to control the returned position on top. Instead of making it go back completely up top (header), I’d like the returned position to be exactly at the content level. How could I do this?

    Thanks!

    Andre

  4. Ricky Onsman says:

    I love this! Have implemented it on a client site here: http://juliemccrossin.com and plan to use it across my client portfolio. In fact, I might whip up a little blog entry on it. Really impressed. Thank you.

  5. Chris says:

    On two sites the plugin worked perfectly! At my site there is a unwanted button that says “Go to Top” behind the regular button. I have not entered any text in the Settings panel. Both buttons disappear when the plugin is deactivated. Please let me know how to get rid of the text button in the background. Thanks.

    PS – Theme: Mystique, version 3.3.2, by digitalnature.

  6. howard roark says:

    Awesome plugin! It’s responsive too! Love the customization!

  7. Marissa says:

    Great plugin! Is there any way, however, to edit the number of pixels from the top that the button appears, and also to remove the button from certain pages?

  8. Yafit says:

    Hi, I installed the plugin ‘Scroll Back to Top’- WordPress Plugin

    But Does not appear in the browser.

    Only the display of WordPress.

    What should I do?

    Thanks in advance.

    Yafit

  9. Kat Slander says:

    I notice the plugin works great when I view my site in regular browsers on desktops and laptops, but does not appear at all on any of the mobile browsers on my phone.

    Is there a trick to getting the plugin to work on mobile browsers too?

    Thanks.

  10. Kat Slander says:

    I’m sorry, I should have included this in my earlier question. Is there custom CCS code to always make the background transparent? I’d like to have just the arrow appear, with no borders or background or anything.

    Thanks again.
    Kat

  11. who says:

    What relationship does this plugin have with wplibs.org?

    I can’t find the reference, but when the plugin is activated, it hangs for a few seconds when accessing this URI. When the plugin is deactivated, the problem goes away.

    I’ve tried to find information on wplibs.org, but it’s fairly well hidden.

    Makes a person curious..

  12. Patrick France says:

    Hi
    Thanks for this great plugin, we used it and loved it.
    Works with WordPress 4.1.1, theme Twenty Ten

    Just one question, is there a way to remove the button on some pages ?

    Regards

  13. Kah says:

    Hi!

    I can’t seem to find the plug ins section in my Admin page.

    Please advise.

    Thanks.

  14. sama55 says:

    Thanks very nice plugin.
    My hope is “verticalOffset” option in admin section.
    scroll-back-to-top/assets/js/scroll-back-to-top.js
    scrollToElement(“body”, scrollBackToTop.scrollDuration, 0); // <== Change 0
    Fixed header exists in many themes. In those themes, scroll point might be shifted.
    Thanks again.

  15. Tamanna says:

    Hi, I absolutely love this widget! I was just wondering if there was a way to have the ‘back to top’ icon as well as add a text in there?

    I’ve installed the widget and would like to have “Back to top” at the bottom of the icon. Just wondering if there was a css I could use to make this happen?

    Thank you for your time.

  16. Doug says:

    How come I don’t see answers to any of the questions?
    Thanks

  17. Ary says:

    It looks like your plugin is loading an old version of Font Awesome. It’s maybe time to update this?

Comments are closed.