Smooth scrolling

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.

General information

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:

React
Vue
React
<SmoothScroll to="section-id">View section</SmoothScroll>
Vue
<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 👇

React
Vue
React
<SmoothScroll to="section-id" duration={2000}>View section</SmoothScroll>
Vue
<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

-

-