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

Selector | `[euiScrollTo]`

### Index

###### Properties

- targetElement

###### Methods

- onClick

###### Inputs

- callbackAfter
- callbackBefore
- containerId
- duration
- easing
- euiScrollTo
- middleAlign
- offset

###### HostListeners

- click

### 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 ""