Back to Top

This component allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content, or on mobile devices where different screen sizes can cause the content to scroll extend.

The following code examples shows how to use a back to top:

<p class="back-to-top padding-0.50 pointer">Scroll to top</p>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

.back-to-top - required all elements with this class will transform to a back to top element by scripting
[data-sg-back-to-top-parent] the value must be a CSS selector, the BackToTop scripting use the selected element as reference for position, see below

Basic Example:

Theme basic Screen size XL

html

Combined with other components

You can combine the back to top component with other components, especially with Buttons.

Theme basic Screen size XL

html

Container

In default the back to top component will shown in the right bottom corner of the window. But you can change the horizontal position by adding the [data-sg-back-to-top-parent] data attribute. The value of the attribute must be a selector to another element on the page.

Theme basic Screen size XL

html