CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Back to Top

The back-to-top component triggers the scrolling to the top of the page.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How to

The Back to Top component brings the user back to the top of the page, in the assumption they will find there the main website navigation.

You can edit the following data attributes to affect the component behavior:

  • data-duration: scroll to top duration, set in ms; default value = 300.
  • data-offset: scrolling offset for the back-to-top button to be visible, set in px; default value = 0.

Scrollable Element #

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-el"> with a height: 100vh and overflow: auto, you can set data-element='.main-el':

<a data-element=".main-el" class="back-to-top js-back-to-top" href="#">
  <!-- ... -->
</a>

Changelog

  • ✅ Added the data-element attribute to specify the element that generates the page scrolling
    🗓 November 7, 2019
  • ✅ Component created
    🗓 November 30, 2018

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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