🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

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.

Nucleo logo Sponsored by Nucleo, a powerful icon manager for web designers

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 Experiment is available in our Components Library.

Creating the structure

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

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

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.

Join our newsletter

Be the first to know when we ship something cool!

✅ Project duplicated

✅ Project created

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