BackToTopButton.md

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Back To Top Button

back-to-top-button is a store block exported by the Store Components app that redirects users to the top of the page when clicked on.

Back To Top Button rendered as a text button

Back To Top Button rendered as a caret icon

Configuration

1. Add the vtex.store-component app to your theme's dependencies in the manifest.json;

 "dependencies: {
    "vtex.store-components": "3.x"
  }

2. Add the back-to-top-button block into a store template of your choosing. In the example, it will be added to the home page:

  "store.home": {
    "blocks": [
+     "back-to-top-button",
    ]
  },

3. Then, declare the back-to-top-button block using its props stated in the table below. For example:

  "store.home": {
    "blocks": [
     "back-to-top-button",
    ]
  },
+  "back-to-top-button":{
+    "props":{
+      "displayThreshold": 800,
+    }
+  }

Prop name	Type	Description	Default Value
displayThreshold	number	Defines the window Y pixel in which the button will be displayed.	600
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

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
backToTopButtonContainer
backToTopButtonHidden
backToTopButtonActive