Smooth scrolling

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

Vue props