# EuiSmoothScrollToDirective

**Type:** directive



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.

```html
<button euiScrollTo="targetSection">Scroll to section</button>
<div id="targetSection">Target content</div>
```

With options:
```html
<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


**Selector:** `[euiScrollTo]`

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