BackTop Component

BackTop component provides a convenient way for users to quickly return to the top of the page, especially suitable for long content pages.

Basic Usage

Basic back to top button that appears when the page scrolls beyond a specified height.

This is line 1 of example text. Please scroll down to see the back to top button effect.

This is line 2 of example text. Please scroll down to see the back to top button effect.

This is line 3 of example text. Please scroll down to see the back to top button effect.

This is line 4 of example text. Please scroll down to see the back to top button effect.

This is line 5 of example text. Please scroll down to see the back to top button effect.

This is line 6 of example text. Please scroll down to see the back to top button effect.

This is line 7 of example text. Please scroll down to see the back to top button effect.

This is line 8 of example text. Please scroll down to see the back to top button effect.

This is line 9 of example text. Please scroll down to see the back to top button effect.

This is line 10 of example text. Please scroll down to see the back to top button effect.

This is line 11 of example text. Please scroll down to see the back to top button effect.

This is line 12 of example text. Please scroll down to see the back to top button effect.

This is line 13 of example text. Please scroll down to see the back to top button effect.

This is line 14 of example text. Please scroll down to see the back to top button effect.

This is line 15 of example text. Please scroll down to see the back to top button effect.

This is line 16 of example text. Please scroll down to see the back to top button effect.

This is line 17 of example text. Please scroll down to see the back to top button effect.

This is line 18 of example text. Please scroll down to see the back to top button effect.

This is line 19 of example text. Please scroll down to see the back to top button effect.

This is line 20 of example text. Please scroll down to see the back to top button effect.

This is line 21 of example text. Please scroll down to see the back to top button effect.

This is line 22 of example text. Please scroll down to see the back to top button effect.

This is line 23 of example text. Please scroll down to see the back to top button effect.

This is line 24 of example text. Please scroll down to see the back to top button effect.

This is line 25 of example text. Please scroll down to see the back to top button effect.

This is line 26 of example text. Please scroll down to see the back to top button effect.

This is line 27 of example text. Please scroll down to see the back to top button effect.

This is line 28 of example text. Please scroll down to see the back to top button effect.

This is line 29 of example text. Please scroll down to see the back to top button effect.

This is line 30 of example text. Please scroll down to see the back to top button effect.

Show Code

Custom Icon

You can customize the icon of the back to top button by setting the icon attribute.

This is line 1 of example text. Please scroll down to see back to top buttons with different icons.

This is line 2 of example text. Please scroll down to see back to top buttons with different icons.

This is line 3 of example text. Please scroll down to see back to top buttons with different icons.

This is line 4 of example text. Please scroll down to see back to top buttons with different icons.

This is line 5 of example text. Please scroll down to see back to top buttons with different icons.

This is line 6 of example text. Please scroll down to see back to top buttons with different icons.

This is line 7 of example text. Please scroll down to see back to top buttons with different icons.

This is line 8 of example text. Please scroll down to see back to top buttons with different icons.

This is line 9 of example text. Please scroll down to see back to top buttons with different icons.

This is line 10 of example text. Please scroll down to see back to top buttons with different icons.

This is line 11 of example text. Please scroll down to see back to top buttons with different icons.

This is line 12 of example text. Please scroll down to see back to top buttons with different icons.

This is line 13 of example text. Please scroll down to see back to top buttons with different icons.

This is line 14 of example text. Please scroll down to see back to top buttons with different icons.

This is line 15 of example text. Please scroll down to see back to top buttons with different icons.

This is line 16 of example text. Please scroll down to see back to top buttons with different icons.

This is line 17 of example text. Please scroll down to see back to top buttons with different icons.

This is line 18 of example text. Please scroll down to see back to top buttons with different icons.

This is line 19 of example text. Please scroll down to see back to top buttons with different icons.

This is line 20 of example text. Please scroll down to see back to top buttons with different icons.

This is line 21 of example text. Please scroll down to see back to top buttons with different icons.

This is line 22 of example text. Please scroll down to see back to top buttons with different icons.

This is line 23 of example text. Please scroll down to see back to top buttons with different icons.

This is line 24 of example text. Please scroll down to see back to top buttons with different icons.

This is line 25 of example text. Please scroll down to see back to top buttons with different icons.

This is line 26 of example text. Please scroll down to see back to top buttons with different icons.

This is line 27 of example text. Please scroll down to see back to top buttons with different icons.

This is line 28 of example text. Please scroll down to see back to top buttons with different icons.

This is line 29 of example text. Please scroll down to see back to top buttons with different icons.

This is line 30 of example text. Please scroll down to see back to top buttons with different icons.

Show Code

Plain Style

Setting the plain attribute enables a plain style back to top button with background color and border.

This is line 1 of example text. Please scroll down to see the plain style back to top button.

This is line 2 of example text. Please scroll down to see the plain style back to top button.

This is line 3 of example text. Please scroll down to see the plain style back to top button.

This is line 4 of example text. Please scroll down to see the plain style back to top button.

This is line 5 of example text. Please scroll down to see the plain style back to top button.

This is line 6 of example text. Please scroll down to see the plain style back to top button.

This is line 7 of example text. Please scroll down to see the plain style back to top button.

This is line 8 of example text. Please scroll down to see the plain style back to top button.

This is line 9 of example text. Please scroll down to see the plain style back to top button.

This is line 10 of example text. Please scroll down to see the plain style back to top button.

This is line 11 of example text. Please scroll down to see the plain style back to top button.

This is line 12 of example text. Please scroll down to see the plain style back to top button.

This is line 13 of example text. Please scroll down to see the plain style back to top button.

This is line 14 of example text. Please scroll down to see the plain style back to top button.

This is line 15 of example text. Please scroll down to see the plain style back to top button.

This is line 16 of example text. Please scroll down to see the plain style back to top button.

This is line 17 of example text. Please scroll down to see the plain style back to top button.

This is line 18 of example text. Please scroll down to see the plain style back to top button.

This is line 19 of example text. Please scroll down to see the plain style back to top button.

This is line 20 of example text. Please scroll down to see the plain style back to top button.

This is line 21 of example text. Please scroll down to see the plain style back to top button.

This is line 22 of example text. Please scroll down to see the plain style back to top button.

This is line 23 of example text. Please scroll down to see the plain style back to top button.

This is line 24 of example text. Please scroll down to see the plain style back to top button.

This is line 25 of example text. Please scroll down to see the plain style back to top button.

This is line 26 of example text. Please scroll down to see the plain style back to top button.

This is line 27 of example text. Please scroll down to see the plain style back to top button.

This is line 28 of example text. Please scroll down to see the plain style back to top button.

This is line 29 of example text. Please scroll down to see the plain style back to top button.

This is line 30 of example text. Please scroll down to see the plain style back to top button.

Show Code

Custom Position

You can customize the position of the back to top button by setting the bottom and right attributes.

This is line 1 of example text. Please scroll down to see back to top buttons at different positions.

This is line 2 of example text. Please scroll down to see back to top buttons at different positions.

This is line 3 of example text. Please scroll down to see back to top buttons at different positions.

This is line 4 of example text. Please scroll down to see back to top buttons at different positions.

This is line 5 of example text. Please scroll down to see back to top buttons at different positions.

This is line 6 of example text. Please scroll down to see back to top buttons at different positions.

This is line 7 of example text. Please scroll down to see back to top buttons at different positions.

This is line 8 of example text. Please scroll down to see back to top buttons at different positions.

This is line 9 of example text. Please scroll down to see back to top buttons at different positions.

This is line 10 of example text. Please scroll down to see back to top buttons at different positions.

This is line 11 of example text. Please scroll down to see back to top buttons at different positions.

This is line 12 of example text. Please scroll down to see back to top buttons at different positions.

This is line 13 of example text. Please scroll down to see back to top buttons at different positions.

This is line 14 of example text. Please scroll down to see back to top buttons at different positions.

This is line 15 of example text. Please scroll down to see back to top buttons at different positions.

This is line 16 of example text. Please scroll down to see back to top buttons at different positions.

This is line 17 of example text. Please scroll down to see back to top buttons at different positions.

This is line 18 of example text. Please scroll down to see back to top buttons at different positions.

This is line 19 of example text. Please scroll down to see back to top buttons at different positions.

This is line 20 of example text. Please scroll down to see back to top buttons at different positions.

This is line 21 of example text. Please scroll down to see back to top buttons at different positions.

This is line 22 of example text. Please scroll down to see back to top buttons at different positions.

This is line 23 of example text. Please scroll down to see back to top buttons at different positions.

This is line 24 of example text. Please scroll down to see back to top buttons at different positions.

This is line 25 of example text. Please scroll down to see back to top buttons at different positions.

This is line 26 of example text. Please scroll down to see back to top buttons at different positions.

This is line 27 of example text. Please scroll down to see back to top buttons at different positions.

This is line 28 of example text. Please scroll down to see back to top buttons at different positions.

This is line 29 of example text. Please scroll down to see back to top buttons at different positions.

This is line 30 of example text. Please scroll down to see back to top buttons at different positions.

Right Distance: 32px

Bottom Distance: 32px

Show Code

Custom Trigger Height

You can customize the scroll height that triggers the back to top button display by setting the visibilityHeight attribute.

This is line 1 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 2 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 3 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 4 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 5 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 6 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 7 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 8 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 9 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 10 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 11 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 12 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 13 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 14 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 15 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 16 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 17 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 18 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 19 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 20 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 21 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 22 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 23 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 24 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 25 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 26 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 27 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 28 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 29 of example text. Please scroll down to see back to top buttons with different trigger heights.

This is line 30 of example text. Please scroll down to see back to top buttons with different trigger heights.

Trigger Height: 200px

Show Code

Specify Scroll Container

You can specify the container element that triggers scrolling by setting the target attribute, which can be a CSS selector string or HTML element.

Container 1

This is line 1 of example text in container 1.

This is line 2 of example text in container 1.

This is line 3 of example text in container 1.

This is line 4 of example text in container 1.

This is line 5 of example text in container 1.

This is line 6 of example text in container 1.

This is line 7 of example text in container 1.

This is line 8 of example text in container 1.

This is line 9 of example text in container 1.

This is line 10 of example text in container 1.

This is line 11 of example text in container 1.

This is line 12 of example text in container 1.

This is line 13 of example text in container 1.

This is line 14 of example text in container 1.

This is line 15 of example text in container 1.

This is line 16 of example text in container 1.

This is line 17 of example text in container 1.

This is line 18 of example text in container 1.

This is line 19 of example text in container 1.

This is line 20 of example text in container 1.

Container 2

This is line 1 of example text in container 2.

This is line 2 of example text in container 2.

This is line 3 of example text in container 2.

This is line 4 of example text in container 2.

This is line 5 of example text in container 2.

This is line 6 of example text in container 2.

This is line 7 of example text in container 2.

This is line 8 of example text in container 2.

This is line 9 of example text in container 2.

This is line 10 of example text in container 2.

This is line 11 of example text in container 2.

This is line 12 of example text in container 2.

This is line 13 of example text in container 2.

This is line 14 of example text in container 2.

This is line 15 of example text in container 2.

This is line 16 of example text in container 2.

This is line 17 of example text in container 2.

This is line 18 of example text in container 2.

This is line 19 of example text in container 2.

This is line 20 of example text in container 2.

Show Code

Custom Content

You can customize the content of the back to top button through the default slot, completely controlling its appearance.

This is line 1 of example text. Please scroll down to see back to top buttons with custom content.

This is line 2 of example text. Please scroll down to see back to top buttons with custom content.

This is line 3 of example text. Please scroll down to see back to top buttons with custom content.

This is line 4 of example text. Please scroll down to see back to top buttons with custom content.

This is line 5 of example text. Please scroll down to see back to top buttons with custom content.

This is line 6 of example text. Please scroll down to see back to top buttons with custom content.

This is line 7 of example text. Please scroll down to see back to top buttons with custom content.

This is line 8 of example text. Please scroll down to see back to top buttons with custom content.

This is line 9 of example text. Please scroll down to see back to top buttons with custom content.

This is line 10 of example text. Please scroll down to see back to top buttons with custom content.

This is line 11 of example text. Please scroll down to see back to top buttons with custom content.

This is line 12 of example text. Please scroll down to see back to top buttons with custom content.

This is line 13 of example text. Please scroll down to see back to top buttons with custom content.

This is line 14 of example text. Please scroll down to see back to top buttons with custom content.

This is line 15 of example text. Please scroll down to see back to top buttons with custom content.

This is line 16 of example text. Please scroll down to see back to top buttons with custom content.

This is line 17 of example text. Please scroll down to see back to top buttons with custom content.

This is line 18 of example text. Please scroll down to see back to top buttons with custom content.

This is line 19 of example text. Please scroll down to see back to top buttons with custom content.

This is line 20 of example text. Please scroll down to see back to top buttons with custom content.

This is line 21 of example text. Please scroll down to see back to top buttons with custom content.

This is line 22 of example text. Please scroll down to see back to top buttons with custom content.

This is line 23 of example text. Please scroll down to see back to top buttons with custom content.

This is line 24 of example text. Please scroll down to see back to top buttons with custom content.

This is line 25 of example text. Please scroll down to see back to top buttons with custom content.

This is line 26 of example text. Please scroll down to see back to top buttons with custom content.

This is line 27 of example text. Please scroll down to see back to top buttons with custom content.

This is line 28 of example text. Please scroll down to see back to top buttons with custom content.

This is line 29 of example text. Please scroll down to see back to top buttons with custom content.

This is line 30 of example text. Please scroll down to see back to top buttons with custom content.

Show Code