Back to Top

Back to Top is a small, self-contained utility widget: a floating button that stays hidden until the visitor scrolls past a chosen distance, then fades in and smooth-scrolls the page back to the top on click. It is intentionally minimal — there is no external stylesheet or heavy front-end library involved. The button’s positioning, fade transition and scroll listener are all inline CSS and a tiny inline script keyed to the specific widget instance’s id, so dropping the widget anywhere on a page adds only a few lines of markup rather than pulling in a separate asset bundle.

What it does under the hood

On render, the widget prints a fixed-position `` element with a unique id derived from the Elementor element id (`tiger-b2t-{id}`), starting fully transparent, non-interactive and shifted 10px down via a CSS transform. An inline script attached to that specific button listens for the page’s scroll event and compares the current scroll offset against the configured threshold: once the visitor has scrolled past it, the button’s opacity, visibility and transform all animate to their visible state over a quarter-second transition; scrolling back above the threshold reverses it. Because the script guards itself with a `data-tg-init` flag, the listener is only ever bound once even if the render function runs more than once. A click handler calls the browser’s native smooth-scroll API to animate back to the top of the document — there’s no custom easing to configure, it simply defers to `window.scrollTo` with `behavior: ‘smooth’`.

The three content controls

The widget’s Content section is deliberately short. Icon is a standard Elementor icon picker, defaulting to a solid up-arrow (`fas fa-arrow-up`) — any icon library available in the Elementor icon manager can be substituted, so a chevron or a “top” glyph works just as well. Position is a two-option select, Bottom right or Bottom left, both pinned 24px from the bottom edge and 24px from the chosen side. Show after (px scrolled) is a plain number field, defaulting to 300, that sets how many pixels of vertical scroll must pass before the button appears — set it low for a short landing page so the button is available almost immediately, or higher on a long-form article so it doesn’t clutter the very top of the page.

Styling

The Style tab covers exactly what a floating action button needs and nothing more: a responsive Size slider (32–72px) that drives both width and height through a CSS custom property, Background and Icon color color pickers, and a Corner radius slider that defaults to 50% — a full circle — but can be dialed down for a rounded-square look instead. There are no separate hover-state color controls and no border or shadow group; the button’s drop shadow (a fixed, non-configurable soft shadow) is baked into the inline style rather than exposed as a control.

When to use it

This widget belongs on any page long enough that a visitor might want a fast way back to the top: long-form blog posts, documentation pages, pricing or FAQ pages with many sections, or a single-page site built from stacked Elementor sections. Because it renders as a fixed-position element wherever it’s dropped, the most common pattern is to place it once inside a Theme Builder footer or a global site part so it appears consistently across every page rather than adding it section by section. Since the button is always fixed to the viewport corner rather than to its container, its position on the page in the editor canvas doesn’t matter — only the Position control (left or right corner) affects where it actually shows up on the front end.

Practical tips

• Because the button is fixed to a screen corner, drop it into a header or footer Theme Builder template once rather than adding it to every individual page — it will still float correctly regardless of where in the document it’s placed.
• If a page already has a floating chat widget or cookie banner pinned to the same corner, switch Position to the opposite side to avoid the two overlapping.
• Lower Show after on shorter pages (or pages with a tall hero) so the button doesn’t feel like it never appears; raise it on very long pages so it doesn’t compete with content near the top.
• Since there’s no separate hover-state styling, keep the chosen Background color high-contrast against typical page backgrounds so the button stays visually distinct without relying on a hover effect to stand out.