# EuiSmoothScrollDirective

**Type:** directive

<p>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.</p>
<p>Scroll on init:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;div euiSmoothScroll [scrollIf]=&quot;shouldScroll&quot;&gt;Content&lt;/div&gt;</code></pre></div><p>Scroll on click:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;div euiSmoothScroll [scrollOnClick]=&quot;true&quot; [duration]=&quot;500&quot;&gt;Click to scroll here&lt;/div&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Smooth scroll provides better UX than instant jump</li>
<li>Use scrollIf to conditionally enable scrolling</li>
<li>Consider reduced motion preferences for accessibility</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Scrolls to host element automatically on init (unless scrollIf is false)</li>
<li>Set scrollOnClick to true for click-triggered scrolling</li>
<li>Default duration is 800ms</li>
<li>Offset adjusts final scroll position</li>
<li>Supports scrolling within specific container via containerId</li>
<li>middleAlign centers element in viewport</li>
</ul>


**Selector:** `[euiSmoothScroll]`

**Standalone:** false

## Inputs

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