This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.
If you are creating a one-page landing page, and you need to enable a scroll to page sections with header links, here is what you can do:
Assign an ID to a target section, add the .smooth-scroll
class to the link, and ensure to set a proper location hash to the href
attribute 👇
<!-- Link --><a href="#my-section" class="smooth-scroll">View section</a><!-- Section --><div id="my-section" class="section"></div>
In React and Vue we have provided this functionality in form of component. The component can be found in src/components/elements/
folder and it's named SmoothScroll.js
(React) / SmoothScroll.vue
(Vue). It returns a link just like in the example above.
Let's see how to use it:
<SmoothScroll to="section-id">View section</SmoothScroll>
<c-smooth-scroll to="section-id">View section</c-smooth-scroll>
Default scroll transition takes 1 second. If you want the scroll animation be faster or slower, define a new value is ms 👇
<!-- 2 seconds animation --><a href="#my-section" class="smooth-scroll" data-duration="2000">View section</a>
Use the duration prop in React and Vue 👇
<SmoothScroll to="section-id" duration={2000}>View section</SmoothScroll>
<c-smooth-scroll to="section-id" :duration="2000">View section</c-smooth-scroll>
Prop | Type | Default | Accepted values |
| string | - | Should match the ID of the target element |
| number | 1000 | Scroll transition in ms |
| function | - | - |
Prop | Type | Default | Accepted values |
| string | - | Should match the ID of the target element |
| number | 1000 | Scroll transition in ms |
| function | - | - |