Back To Top Button by vtex

This page is about version 3.151.2 of the app, which is not the most recent version. The latest stable version is 3.178.2.

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.

{"base64":" ","img":{"width":1586,"height":713,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56394,"url":"https://user-images.githubusercontent.com/28419764/77644893-9238af80-6f40-11ea-8ceb-7355d0c12686.png"}}

Back To Top Button rendered as a text button

{"base64":" ","img":{"width":1574,"height":683,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1687084,"url":"https://user-images.githubusercontent.com/28419764/79279983-a60f6b80-7e85-11ea-9a8d-48abd655e559.png"}}

Back To Top Button rendered as a caret icon

Configuration

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


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

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:


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

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


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

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`