> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to create a “Scroll to top” button

**Here are the steps needed create a button that will scroll to the top of the page. This type of button is very useful especially for very long pages, such as blog posts.**

|    |    |    |
| --- | --- | --- |
| [1. Creating and styling the button](#2-creating-and-styling-the-button) | [2. Positioning the button](#2-positioning-the-button) | [3. Adding “link to top” on the button](#2-adding-link-to-top-to-the-button) |

## Creating and styling the button

Before we start building the button, please keep in mind that the sizes we mention below are just orientative. You can use any size you want and make the button look the way you want it.

### Creating the button

Select the first element in the **Layers & Files section (treeview)** and create a new container. Press C on your keyboard to create a new **column element**. Inside this container you can add an **upward arrow** image (We recommend using an SVG file).

### Styling the button

To style the button go to the Right side panel and follow these steps:

* Set a size of **50px width and 50px height**
* Choose a background for your button
* Set a **radius of 50%** to turn your square button into a circle
* In the shadow section apply a shadow to give the button more depth
* Add padding to the arrow image inside of the button if you want to

![Creating and styling scroll to top button](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-styling-button_uoo289.gif)

## Positioning the button

Now that the button is created and styled you need to position it. To do this you will need to select your button and go to the Right side panel in the Advanced tab. Here you will need to add the following Properties to your button.

* **Position: fixed;** - Will make your button stay in this position while scrolling
* **Bottom: 50px;** - Will place your button 50 pixels from the bottom of the screen
* **Right: 50px;** -  - Will place your button 50 pixels from the right of the screen

![Positioning the button](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-position-button_bxjtvh.gif)

## Adding “link to top” to the button

There are two steps required to making the “scroll to top” button work:

### Add an ID to the top of the page

Select the first element in your treeview, go to the HTML section and in the ID field type the id you want.

### Add the link to the button

Now you just need to select your scroll to top button, click the Link icon above it and select the “Scroll To” link type and select the ID you placed at the top. 

| If you want to create a smooth scroll effect please [check out this article](/en/article/how-can-i-create-a-smooth-scroll-to-transition-bozkzw/).

![Adding scroll to top link on the button](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-adding-link_8fejhb.gif)

|| To properly test the button and the smooth scrolling effect you will need to publish your project or export and run it locally.