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.
<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.
