---
title: "Sticky to Top Element"
date: 2025-05-07
author: "Jeroen Moolenschot"
---

# Sticky to Top Element

Displays a fixed ‘Back to Top’ button on the right bottom of your website. The button appears after scrolling and smoothly returns users to the top of the page when clicked. Fully styleable to match your site design.

 In YOOtheme builder or templates you can Select new elements to create your pages.   
Go to **YOOtheme > Layout > Footer** to add this element to all pages.  
In this popup you will see the Joomill Extensions section with all available elements.

 ![yootheme elements](https://www.joomill-extensions.com/images/documentation/yoothemeelements/yootheme-elements.jpg)

 Select the Sticky to Top element.

 ![empty content](https://www.joomill-extensions.com/images/documentation/yoothemeelements/stickytotop-content.jpg)

 **Content Tab**

 
|  |  |
| --- | --- |
| Icon | Click on the pencil to pick an icon from the icon library.  |
| Title | Enter an optional text for the icon |
| Link title | Enter an optional text for the title attribute of the link, which will appear on hover. |

  

  ![empty content](https://www.joomill-extensions.com/images/documentation/yoothemeelements/stickytotop-settings.jpg)

 **Settings Tab**

  

 
|  |  |
| --- | --- |
| Icon width | Set the size of the icon in px. |
| Color | Choose the icon color.  
You can choose from:  
- None  
- Muted  
- Emphasis  
- Primary  
- Secondary  
- Success  
- Warning  
- Danger |
| Title Style | Set the style of the Title Text  
Choose from:   
- Meta  
- Small |
| Grid Column Gap | Set the Grid Column Gap  
Choose from:   
- None  
- Small  
- Medium  
- Default  
- Large |
| Position Element | Select the position of the element on the screen.  
Choose from:   
- Top Left  
- Top Center  
- Top Right  
- Center Left  
- Center   
- Center Right  
- Bottom Left  
- Bottom Center  
- Bottom Right |
| Position | Static (default)  
Change this to Relative to modify the position. |
| Margin | Set the Margin of this element  
Choose from:   
- Keep Existing  
- None  
- Small  
- Medium  
- Default  
- Large  
- X-Large |
| Visibility | Choose where you would like to show the empty element.  
You can choose from:  
- Show Always  
- Visible Small (Phone Landscape)  
- Visible Medium (Tablet Landscape)  
- Visible Large (Desktop)  
- Visible X-Large (Large Screens)  
- Hidden Small (Phone Landscape)  
- Hidden Medium (Tablet Landscape)  
- Hidden Large (Desktop)  
- Hidden X-Large (Large Screens) |

 **Demo**

 *See the right bottom of this page.*