Sticky To Top

The Sticky To Top element adds a floating back to top button to the corner of the browser window. It stays hidden while the visitor is near the top of the page, appears once they have scrolled far enough, and takes them back up with one click or tap.

Adding the element

Add an element in the YOOtheme Pro builder and pick Sticky To Top from the Planckie Elements group. The button needs no content: with the default settings it renders as a round arrow icon in the bottom right corner.

To show the button on every page of the site, place it once in the footer layout, which YOOtheme Pro renders on every page. To show it on a single page, place it in that page's layout.

Where you drop it within a layout does not matter. On the live page the element moves itself to the end of the document, because a section with a parallax or an animation would otherwise become the anchor of the fixed button and drag it along the page. In the builder it stays where you placed it and is always visible, whatever the scroll position, so that you can select and edit it.

If a page ends up with two buttons — one in the footer layout and one in the page — only the first one in the document works, and the others stay hidden. Two buttons would otherwise sit on top of each other in the same corner.

Content

Option	Description
Text	Shown next to the icon, for example Back to top. Left empty, the button shows the icon only. Empty by default.
Icon	An icon from the YOOtheme Pro icon library. chevron-up by default; cleared, it falls back to chevron-up.

Settings

Button

Option	Description
Style	Default, Primary, Secondary or Danger, taken from the active theme style, or Custom. Default by default.
Color	The text and icon color, shown once Style is set to Custom.
Background	The background color, shown once Style is set to Custom.
Hover Color	The text and icon color on hover and keyboard focus. Left empty, the color stays the same.
Hover Background	The background on hover and keyboard focus. Left empty, the background stays the same.
Size	Small, Default or Large, the button sizes of the theme style. The icon alone sits in a square of 30, 40 or 55 pixels.
Shape	Circle, Theme or Square. Circle by default. Next to text, a circle becomes a pill. Theme keeps the rounding of the button style.
Icon Alignment	Left or Right of the text. Active once the button has text.

A theme style follows the active style, so the button changes with the style instead of freezing today's colors. A Custom style needs both Color and Background: with either one missing, or a value that is not a color, the button falls back to the Default style rather than rendering invisible.

Position

Option	Description
Screen Corner	Bottom Right or Bottom Left of the browser window. Bottom Right by default.
Horizontal Offset	The distance from the side of the window, 0 to 500 pixels. 30 by default.
Bottom Offset	The distance from the bottom of the window, 0 to 500 pixels. 30 by default.
Horizontal Offset (Phone)	The same distance on screens narrower than 640 pixels. 15 by default.
Bottom Offset (Phone)	The same distance on screens narrower than 640 pixels. 15 by default.
Z Index	0 to 9999, 990 by default, which sits above a sticky navbar and below modals and the offcanvas menu.

Scroll

Option	Description
Show After	How far the page has to be scrolled before the button appears. 300 by default.
Unit	Pixels or Percent of the scrollable height of the page. Pixels by default; a percentage above 100 counts as 100.
Scrolling	Smooth scroll glides back to the top instead of jumping. On by default.

The button never appears on a page that has not been scrolled at all, even with Show After set to 0, and never on a page short enough to fit the window. A percentage follows a page that grows, so late images and lazily loaded sections move the threshold with them.

Animation

Option	Description
Animation	How the button appears and disappears: Fade, Slide Up or Scale. Fade by default.
Duration	0 to 1000 milliseconds, 300 by default.

General and Advanced

The General group holds Visibility, which is the setting to reach for when the button should only appear on some screen sizes. It and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-sticky-to-top, .pe-sticky-to-top-button, .pe-sticky-to-top-icon, .pe-sticky-to-top-text

.pe-sticky-to-top is the fixed wrapper that carries the position and the animation, .pe-sticky-to-top-button the button itself, and .pe-sticky-to-top-icon and .pe-sticky-to-top-text its two parts. Style the button rather than the wrapper, so your rules do not interfere with showing and hiding it.

Custom CSS keeps working after the element moves to the end of the document, because YOOtheme scopes the rules to the element itself rather than to its place in the layout.

Accessibility and keyboard

The button is a link to the top of the page. With visible text, the text is its name. With the icon alone, it is named Back to top, translated with the rest of the plugin, and the icon itself is hidden from screen readers.

Key	Action
Tab	Reaches the button while it is visible. A hidden button is left out of the tab order.
Enter	Scrolls back to the top and moves the focus to the start of the page, so the next Tab begins at the top instead of at a button that has just disappeared.

With reduced motion enabled in the visitor's system settings, the button jumps to the top instead of gliding, even when the theme sets smooth scrolling for the whole page, and Slide Up and Scale fall back to a plain fade.

Notes and limits

• The button is pinned to the browser window, so it ignores the margins, alignment and width settings of the layout. Screen Corner, the offsets and Z Index are what position it.
• Without JavaScript the button stays hidden. Its link still points to the top of the page.
• In the builder the button stays visible regardless of Show After, and every instance is shown, so each one can be edited.