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 buttonBack To Top Button rendered as a text button

Back To Top Button rendered as a text button

Back To Top Button rendered as a caret iconBack To Top Button rendered as a caret icon

Back To Top Button rendered as a caret icon

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
 "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. 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",
    ]
  },
  1. 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 nameTypeDescriptionDefault Value
displayenumDefines 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
displayThresholdnumberDefines 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

Did this page help you?