⚡️ Download 374 HTML, CSS, JS Components and 8 templates for $99 - Limited time offer ⏳

Back To Top

Back To Top

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.
If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

👋 A new version of this component is available. Download now →.

Creating the structure

We inserted the "Back to top" link at the bottom of our content, before the <body> closing tag.

  <!-- all your content here --> 
  <a href="#" class="cd-top text-replace js-cd-top">Top</a>

Adding style

The link will appear fixed on the right-side of the content. Initially it has a visibility: hidden and an opacity: 0.
Both visibility and opacity are controlled through two classes: .cd-top--is-visible and .cd-top--fade-out.

.cd-top--is-visible { // back-to-top button visible
  visibility: visible;
  opacity: 1;

.cd-top--fade-out { // reduce button opacity if user keeps scrolling
  opacity: .5;

Events handling

In the main.js file, we have defined three variables to control the "Back to top" link appearance:

var offset = 300, // browser window scroll (in pixels) after which the "back to top" link is shown
  offsetOpacity = 1200, //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
  scrollDuration = 700;

The offset variable will be used to toggle the class .cd-top--is-visible; the offsetOpacity, instead, to add the .cd-top--fade-out class. The top scrolling function is bound to the "Back to top" click event.

Level up your CSS skills

💌 Each month we email a 1-minute CSS tutorial to 20K developers

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.