Replace the default browser behaviour (jump) with a smooth scrolling transition.
All components are based on CodyFrame.
The smooth scrolling component is used to animate the browser scrolling when a user clicks an element linking to a different section on the same page.
It uses the css
scroll-behavior property (applied to the <html> element) to animate the scrolling.
If you want to limit the smooth scrolling behavior to a specific section of your webpage, make sure to set this property for that section only (rather than the <html> element).
For browsers that do not support the
To set a custom duration for the scrolling, you can edit the
data-duration attribute (set in milliseconds) of the
By default, the
window is the element generating the vertical scrollbar. If you have a different scrollable element in your page, you can use the
data-scrollable-element-y attribute to pass the CSS selector of the scrollable element.
For example, if you have a
<main class="main-el"> with a
height: 100vh and
overflow: auto, you can set
<a data-scrollable-element-y=".main-el" class="js-smooth-scroll" href="#targetId">
<!-- ... -->
You can do the same for the horizontal scrolling, using the
Fixed Header #
If your page has a fixed element (e.g., a fixed header), part of your target element may be obscured when the page scrolls to it.
To fix this issue, add a
scroll-padding equal to the height of the fixed element to the
<html> (or use the scroll-behavior utility classes):
scroll-padding: 70px; // height of the fixed element
You can use a CSS variable as well:
To support older browsers (e.g., IE), you can use the
data-fixed-element attribute to pass the CSS selector of the fixed element:
<a href="#targetId" class="js-smooth-scroll" data-fixed-element=".js-fixed-header">Link</a>