# EuiSmoothScrollDirective

**Type:** directive



Directive automatically scrolling to host element on initialization or click.
Provides animated scroll with configurable duration, offset, and easing.
Supports conditional scrolling and callbacks before/after scroll.

Scroll on init:
```html
<div euiSmoothScroll [scrollIf]="shouldScroll">Content</div>
```

Scroll on click:
```html
<div euiSmoothScroll [scrollOnClick]="true" [duration]="500">Click to scroll here</div>
```

### Accessibility
- Smooth scroll provides better UX than instant jump
- Use scrollIf to conditionally enable scrolling
- Consider reduced motion preferences for accessibility

### Notes
- Scrolls to host element automatically on init (unless scrollIf is false)
- Set scrollOnClick to true for click-triggered scrolling
- Default duration is 800ms
- Offset adjusts final scroll position
- Supports scrolling within specific container via containerId
- middleAlign centers element in viewport


**Selector:** `[euiSmoothScroll]`

## Inputs
- **callbackAfter**: `any` - 
- **callbackBefore**: `any` - 
- **containerId**: `string` - 
- **duration**: `number` - 
- **easing**: `string` - 
- **middleAlign**: `any` - 
- **offset**: `number` - 
- **scrollIf**: `boolean` - 
- **scrollOnClick**: `boolean` -