BackToTop

The BackToTop component is used on a page to scroll the page to top when it was scrolled down. It can be configured to be only visible after certain vertical offset. By default the button is shown when the page has been scrolled down more than 200px.

Import

React

// with @dhl-official/react-library:
import { DhlBackToTop } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlBackToTop } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-back-to-top></dhl-back-to-top>

Vue.js

// with @dhl-official/vue-library:
import { DhlBackToTop } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlBackToTop } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlBackToTop buttonText="Top" clickEvent={() => {}}></DhlBackToTop>

Angular

<dhl-back-to-top buttonText="Top" [clickEvent]="handleOnClick"></dhl-back-to-top>

Vue.js

<dhl-back-to-top buttonText="Top" :clickEvent.prop="() => {}"></dhl-back-to-top>

Interactive Demo

Migrating from DUIL 1.0

• Rename onClick to clickEvent
• Rename onScrollComplete to scrollCompleteEvent

Readme

Properties

Property	Attribute	Description	Type	Default
buttonText	button-text	A REQUIRED buttonText prop for the inner BackToTop text - for an icon only variant, this prop should be set to empty	string	undefined
clickEvent	--	An optional onClick callback handler.	(e: MouseEvent) => void	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-back-to-top-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTracking	data-tracking	An optional data tracking prop for the component.	string	undefined
focusSelector	focus-selector	An optional focusSelector prop - defaults to body, selector prop to focus an interactive element when back to top scroll is complete. user should set tabIndex appropriately if focus needs to move to a non-interactive element. use these styles to have smooth scroll behavior html {scroll-behavior: smooth;	string	undefined
iconOrientation	icon-orientation	An optional iconOrientation prop used to align the icon within the component. Passing a value to this prop without a set buttonText will result in a misaligned icon and thus should not be set if an iconOnly variant is desired.	"left" \| "right"	undefined
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
scrollCompleteEvent	--	An optional onScrollComplete callback handler triggered upon scroll completion	() => void	undefined
showAt	show-at	An optional showAt prop taking a scrollY distance at which the BackToTop button should become visible	number	200
size	size	An optional size prop for the component.	"md" \| "sm" \| "xs"	DHL_BACK_TO_TOP.SIZE.MD
textSize	text-size	An optional textSize prop for the BackToTop inner text	"10xl" \| "11xl" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"	DHL_BACK_TO_TOP.TEXT_SIZE.MD
textWeight	text-weight	An optional textWeight prop for the BackToTop inner text weight	200 \| 400 \| 700 \| 800	DHL_BACK_TO_TOP.TEXT_WEIGHT[700]

Dependencies

Depends on

• dhl-button
• dhl-text

Graph

---

Built by DHL User Interface Library Team!