Back To TopThis "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. View demo Download ️ Design 10x faster with our library of 368 components This resourceis suitablefor website with lots ofpagecontent.The link fades inon the right-handsideof the content area, after the browser window has been scrolled beyonda certain point, and remains fixed during scrolling. A new version of this component is available. Download now . Creating the structureWe 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 styleThe link will appear fixed on the right-side of the content.Initially it hasavisibility: hidden and anopacity: 0. Events handlingIn 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-outclass. The top scrolling function is bound to the "Back to top" click event. |
