File

packages/components/directives/eui-smooth-scroll.directive.ts

Description

Directive scrolling smoothly to a target element when clicked. Provides animated scroll with configurable duration, offset, and easing. Supports scrolling within containers and callbacks before/after scroll.

Example :
<button euiScrollTo="targetSection">Scroll to section</button>
<div id="targetSection">Target content</div>

With options:

Example :
<a euiScrollTo="footer" [duration]="1000" [offset]="-50">Go to footer</a>

Accessibility

  • Smooth scroll provides better UX than instant jump
  • Ensure target element has proper focus management
  • Consider reduced motion preferences for accessibility

Notes

  • Target element identified by ID via euiScrollTo input
  • Default duration is 800ms
  • Offset adjusts final scroll position (negative scrolls higher)
  • Supports multiple easing functions (easeInOutQuart default)
  • Can scroll within specific container via containerId

Metadata

Index

Properties
Methods
Inputs
HostListeners

Inputs

callbackAfter
Type : any
callbackBefore
Type : any
containerId
Type : string
duration
Type : number
easing
Type : string
euiScrollTo
Type : string
middleAlign
Type : any
offset
Type : number

HostListeners

click

Methods

onClick
onClick()
Decorators :
@HostListener('click')
Returns : void

Properties

targetElement
Type : any

results matching ""

    No results matching ""