Back To Top Button
The back-to-top-button
component is a button that redirects users to the top of the page when clicked.

Back To Top Button rendered as a text button

Back To Top Button rendered as a caret icon
Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
"dependencies": {
"vtex.store-components": "3.x"
}
- Add the
back-to-top-button
block into a store template of your choice. In the example, it will be added to the home page:
"store.home": {
"blocks": [
+ "back-to-top-button",
]
},
- Then, declare the
back-to-top-button
block using the props stated in the Props table. For example:
"store.home": {
"blocks": [
"back-to-top-button",
]
},
+ "back-to-top-button":{
+ "props":{
+ "displayThreshold": 800,
+ }
+ }
Props
Prop name | Type | Description | Default Value |
---|---|---|---|
display | enum | Defines the component rendering. Possible values are: button to display a button with a Back To Top label text or caret-icon to display just an icon. | button |
displayThreshold | number | Defines the window Y pixel in which the button will be displayed. | 600 |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
backToTopButtonActive |
backToTopButtonContainer |
backToTopButtonHidden |