← All widgetsWidget 309 · emcp_custom_309

Scroll to Top

Elementor widget6 layouts13 content options17 style options2 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: scroll to top, back to top, button, floating, progress.

Setup guide

  1. Open a page in Elementor, search the panel for Scroll to Top and drag it into a container.
  2. Content › Button: Style, Icon, Label (pill / tab), Position, Show After Scrolling (px), Show Percentage Inside (ring), Smooth Scroll, Scroll Duration (ms) and 5 more.
  3. Pick a Style: Circle, Circle with scroll progress ring, Rounded square, Pill with label, Minimal arrow, Edge tab. Each one is shown below.
  4. Style tab sections: Style. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Conditional options: Footer Selector appears when Hide When Footer Is Visible is yes.
This widget is fixed to the viewport (a corner button, a bar or a toast). On this page each demo is pinned inside its grey stage box so you can see it in place; on a real page it floats over the content. Scroll-driven options react to the scrolling of this page.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Circle

Style = circle

Layout

Circle with scroll progress ring

Style = ring

Layout

Rounded square

Style = square

Layout

Pill with label

Style = pill

Layout

Minimal arrow

Style = minimal

Layout

Edge tab

Style = tab

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Button

OptionTypeChoices / rangeDefaultNotes
Style
style		DropdownCircle, Circle with scroll progress ring, Rounded square, Pill with label, Minimal arrow, Edge tabring
Icon
icon		Iconfas fa-arrow-up
Label (pill / tab)
label		TextTop
Position
position		DropdownBottom right, Bottom left, Bottom centre, Right, vertically centredbottom-right
Show After Scrolling (px)
show_after		Numbermin 0, max 5000300
Show Percentage Inside (ring)
show_pct		Toggleon / off
Smooth Scroll
smooth		Toggleon / offyes
Scroll Duration (ms)
duration		Numbermin 100, max 3000600
Entrance
anim		DropdownFade, Fade up, Scale, Slide from edgefade-up
Hide on Mobile
hide_mobile		Toggleon / off
Hide When Footer Is Visible
hide_bottom		Toggleon / off
Footer Selector
footer_selector		TextfooterShown when hide_bottom = yes
Accessible Label
aria		TextScroll to top

Style tab

Style

OptionTypeChoices / rangeDefaultNotes
Size
size		Slidermin 32, max 96, px48
Icon Size
icon_size		Slidermin 10, max 48, px18
Icon Color
color		Color#ffffff
Background
bg		Color#101828
Hover Icon Color
color_h		Color#ffffff
Hover Background
bg_h		Color#6a11cb
Progress Ring
ring_color		Color#6a11cb
Ring Track
ring_track		Colorrgba(255,255,255,0.25)
Ring Thickness
ring_w		Slidermin 1, max 8, px3
Border
border		Border
Radius (square / pill)
radius		Slidermin 0, max 50, px12
Shadow
shadow		Box shadow
Horizontal Offset
offset_x		Slidermin 0, max 120, px24
Vertical Offset
offset_y		Slidermin 0, max 200, px24
Label Typography
label_typo		Typography
Z-index
zindex		Numbermin 1, max 999999970
Hover Effect
hover_fx		DropdownNone, Lift, Bounce icon, Growlift

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_309" and a settings object using the keys above. Run get-custom-widget with id 309 for the full JSON spec.