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 | – | – |