✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨
Cruip CSS

Smooth scrolling

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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

PropTypeDefaultAccepted values
to (required)stringShould match the ID of the target element
durationnumber1000Scroll transition in ms
onLinkClickfunction

Vue props

PropTypeDefaultAccepted values
to (required)stringShould match the ID of the target element
durationnumber1000Scroll transition in ms
onLinkClickfunction
Last updated on August 17, 2021