✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Smooth scrolling

Cruip CSS

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>


Scroll duration

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>


TL;DR

React props

Prop Type Default Accepted values
to (required) string Should match the ID of the target element
duration number 1000 Scroll transition in ms
onLinkClick function

Vue props

Prop Type Default Accepted values
to (required) string Should match the ID of the target element
duration number 1000 Scroll transition in ms
onLinkClick function
Last updated on August 17, 2021