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! <\/p>\n
Check out some custom button design inspiration<\/a> <\/p>\n 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.<\/p>\n This setting will change the visibility of the button.<\/p>\n This setting is the minimum browser resolution to display the button. To restrict the button from This setting is the maximum browser resolution to display the button. To restrict the button from This setting will change the width of the button. The measurement is in pixels. <\/p>\n This setting will change the height of the button. The measurement is in pixels. <\/p>\n 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.<\/p>\n This setting will change the background color of the button in it’s hover state. <\/p>\n This setting will change the foreground color of the button. <\/p>\n This setting will change the foreground color of the button in it’s hover state.<\/p>\n This setting will change the transparency of the button.<\/p>\n 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.<\/p>\n This setting will change where the button appears from left to right.<\/p>\n This setting will change whether the button appears on the top or bottom.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n This setting is the time the button will be shown after the user scrolls down the page. The default value of 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.<\/p>\n This is an advanced setting that requires CSS knowledge to use. You must add selectors in this field, your CSS should look something like:<\/p>\n <\/p>\n Check out some custom button design inspiration<\/a> <\/p>\n 2 filters are provided for overriding default plugin behavior.<\/p>\n 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. <\/p>\n 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. <\/p>\n 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. <\/p>\n 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.<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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, […]<\/p>\n","protected":false},"author":1,"featured_media":445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[28,27,23,19,26,10],"_links":{"self":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/456"}],"collection":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":15,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/456\/revisions\/533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nDownload v1.1.3 of the Scroll Back to Top Plugin<\/a><\/p>\n
\nCheck out the WordPress Scroll Back to Top plugin page<\/a><\/p>\nSettings Help<\/h2>\n
Visibility<\/h4>\n
Status<\/h6>\n
\n
Minimum Browser Resolution<\/h6>\n
\nappearing in smaller browsers, increase the value of this from 0 pixels to a higher value.<\/p>\nMaximum Browser Resolution<\/h6>\n
\nappearing in larger browsers, decrease the value of this from 9999 pixels to a lower value.
\n
\n <\/p>\nButton Appearance<\/h4>\n
Width<\/h6>\n
Height<\/h6>\n
Background Color<\/h6>\n
Background Hover Color<\/h6>\n
Foreground Color<\/h6>\n
Foreground Hover Color<\/h6>\n
Opacity<\/h6>\n
Border Radius<\/h6>\n
\n <\/p>\nButton Location<\/h4>\n
Horizontal Alignment<\/h6>\n
\n
Vertical Alignment<\/h6>\n
\n
Horizontal Distance from Edge<\/h6>\n
Vertical Distance from Edge<\/h6>\n
\n <\/p>\nButton Label<\/h4>\n
Label Type<\/h6>\n
\n
Icon Size<\/h6>\n
\n
Custom Label Text<\/h6>\n
Font Size<\/h6>\n
\n <\/p>\nAnimation Options<\/h4>\n
Scroll Duration<\/h6>\n
Visibility Duration<\/h6>\n
\n0 means that the option is disabled and the button will not time out. A value greater then 0 milliseconds will
\ncause the button to timeout after the set amount of time has passed. If you choose to use this option I recommend
\na value between 1500ms-2500ms.<\/p>\nFade Duration<\/h6>\n
\n <\/p>\nAdvanced Options<\/h4>\n
Extra CSS<\/h6>\n
.scroll-back-to-top-wrapper:hover {\r\n foreground-color:#FFFFFF\r\n}<\/pre>\n
\nCheck out the WordPress Scroll Back to Top plugin page<\/a><\/p>\nFilters<\/h4>\n
\nsbtt_button_markup – The HTML markup for the button will be passed through this filter. Use this to add additional markup to the button.<\/p>\nTroubleshooting<\/h4>\n
add_filter('sbtt_button_markup', 'my_scroll_back_to_top_filter');\r\nfunction my_scroll_back_to_top_filter($text) {\r\n $text = str_replace(\r\n '<span class=\"scroll-back-to-top-inner\">',\r\n '<span class=\"scroll-back-to-top-inner\"><i class=\"fa fa-arrow-circle-up\"><\/i>',\r\n $text\r\n );\r\n\r\n return $text;\r\n}<\/pre>\n