A button that allows users to quickly return to the top of the page.
A back to top button provides an easy way to return to the top of the page, without having to manually scroll.
Use the back to top component when there is a lot of content on the page, such as articles, blogs, or listings.
Do not use:
The back to top button appears when users want to scroll up, making it visible only when necessary.
On mobile and smaller screens, the icon turns into an upward chevron and the text becomes 'Top' below the icon to save space.
By default the back to top button appears when users start scrolling up, signaling an intention to return to the top. However, if you want the button to appear when users have scrolled down a certain distance you can use the data-offset attribute.
By default, the visibility of the back to top button is toggled by the scrolling on the window element. If you have a different scrollable element in your page, you can use the data-element attribute to pass the CSS selector of the scrollable element.
For example, if you have a <main class="main-element"> with a height: 100vh and overflow: auto, you can set data-element='.main-element'
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.
⚠️ Scroll down and then up to reveal the Back to top button.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur, aspernatur. Sapiente dolorum neque modi ad repellendus, suscipit quia doloremque vero, veritatis aliquid nihil! Adipisci odit laudantium voluptas repellendus consequatur assumenda eveniet, molestias nobis tenetur? Quaerat ex illo ut cupiditate blanditiis qui atque vero fuga, consequatur velit perferendis rem reprehenderit tenetur, amet illum architecto, maxime dicta impedit iusto! Nobis, quam incidunt maxime at quia laudantium natus cum. Quis eveniet hic officiis animi doloremque, tenetur consequatur nihil eligendi nobis in ex voluptates harum, delectus dicta facilis, vero ea. Molestias dolorum, eius ipsa officia error iste illo voluptatum ipsum eaque. Quisquam quasi ab quibusdam cupiditate explicabo ad nobis aliquam, saepe, commodi molestiae error, quos quaerat ea! Ipsum minus velit quisquam omnis recusandae saepe! Dolore rerum tempore est veritatis minus modi facere, ipsam illo dicta, iusto beatae officia odio deserunt veniam dignissimos quos quia laudantium iure fugit eaque possimus suscipit? Magni saepe soluta nisi ipsa iusto deleniti tempora, explicabo commodi, at quam voluptatem voluptatum voluptas accusamus non id asperiores nobis aliquid excepturi? Delectus consectetur, animi aut illum at iusto? Est impedit iusto, praesentium porro eaque unde aspernatur aperiam. Veniam error, deleniti iusto aut a ullam voluptatem dignissimos quia! Maxime vitae reprehenderit quidem eligendi sit non est? Earum illum sequi odio. Beatae sit unde velit voluptatibus, ducimus officia, accusamus iusto voluptas atque necessitatibus, qui sunt delectus porro reiciendis quisquam hic autem illo magnam ipsa quod nobis odio dignissimos. Impedit ipsum tenetur deserunt quod odio labore, minus, sit voluptate corrupti nisi pariatur quae quaerat, necessitatibus est iste exercitationem quisquam quia voluptas rem? Eos voluptatibus nihil aut reprehenderit suscipit temporibus praesentium quod, animi debitis. Dolores exercitationem nesciunt ea eum voluptatibus quaerat! Expedita quae suscipit, corrupti repudiandae reiciendis autem totam ipsam dolor rem eius sed doloremque modi voluptates, quidem consequatur deserunt possimus ullam inventore voluptate nemo dolore error amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, tenetur quidem iste nisi accusantium dicta nostrum ratione officia, fuga ipsa fugit qui nemo quibusdam voluptatibus hic dolor quaerat ut sapiente magnam ullam nesciunt accusamus temporibus. Dolore doloremque dolorem quos ab ducimus debitis modi adipisci minus animi architecto odit quia voluptatem optio nulla eaque, neque suscipit accusamus dolorum enim! Quos dolor eos dolorem quibusdam debitis distinctio voluptas aperiam, ratione voluptatem omnis voluptates adipisci, praesentium temporibus dicta eius dolorum maiores quae doloremque? Error odio harum debitis atque, similique minima nobis voluptatibus sequi non consequatur cumque sint ratione accusamus deleniti maiores fugit animi repellat ullam, natus at quam excepturi tenetur cupiditate. Corporis tenetur possimus soluta praesentium maxime vero autem reprehenderit quia culpa unde velit cum sapiente eligendi laboriosam fugiat adipisci, architecto libero, reiciendis doloribus ratione tempora temporibus. Aliquid quibusdam, dolor officia temporibus repellendus nemo explicabo hic quod! Totam architecto officiis vitae nostrum quae deserunt, harum quasi cumque fuga delectus. Consequuntur deserunt alias, consectetur recusandae minima ducimus vitae in mollitia at, tempore blanditiis expedita modi repellendus, nam harum dolorem laudantium aliquam! Harum omnis eos perspiciatis quam mollitia. Voluptates quas nulla quasi ex accusantium soluta laudantium beatae commodi ullam expedita, sapiente enim totam quia? Iste, facere repudiandae ipsum fuga, enim quibusdam doloribus cumque odit atque repellat numquam nulla dolor molestiae laboriosam deleniti ab in omnis, soluta sed ex quae optio! Corporis provident reprehenderit, repellat obcaecati voluptatem consequuntur similique rem tempore eveniet delectus iste tenetur? Autem accusamus nisi voluptate earum atque molestias? Nemo cumque consequuntur ullam ex cum, fuga voluptas vero nihil laborum architecto, possimus incidunt natus autem nobis aliquam molestiae placeat provident ut delectus. Totam error unde obcaecati porro velit mollitia maxime iure, perferendis vitae placeat, officia, natus odio quam quo perspiciatis dicta nulla voluptates in expedita commodi non. Saepe tempora architecto quos dolor quis a impedit voluptates dignissimos, quia eaque placeat, sunt aperiam omnis vel aliquam? Mollitia voluptas exercitationem eveniet quos tempore quisquam provident, fuga hic harum asperiores aperiam magni dolores ex sint illum voluptatem delectus id earum beatae sequi esse at ratione quas. Rem, accusamus. Non, vel maxime quisquam magni culpa quidem repellat in dolorum nam vero asperiores voluptatibus laudantium ducimus quis quos expedita omnis a illum explicabo. Suscipit sint, delectus praesentium velit vel earum pariatur, adipisci perspiciatis animi illo porro nihil! Unde maxime a vel eligendi iure veniam rem. Nulla, vero! Sequi sit autem assumenda natus numquam in iste aliquam id cupiditate!