# EuiSmoothScrollToDirective

**Type:** directive

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiScrollTo=&quot;targetSection&quot;&gt;Scroll to section&lt;/button&gt;
&lt;div id=&quot;targetSection&quot;&gt;Target content&lt;/div&gt;</code></pre></div><p>With options:</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;a euiScrollTo=&quot;footer&quot; [duration]=&quot;1000&quot; [offset]=&quot;-50&quot;&gt;Go to footer&lt;/a&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Smooth scroll provides better UX than instant jump</li>
<li>Ensure target element has proper focus management</li>
<li>Consider reduced motion preferences for accessibility</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Target element identified by ID via euiScrollTo input</li>
<li>Default duration is 800ms</li>
<li>Offset adjusts final scroll position (negative scrolls higher)</li>
<li>Supports multiple easing functions (easeInOutQuart default)</li>
<li>Can scroll within specific container via containerId</li>
</ul>


**Selector:** `[euiScrollTo]`

**Standalone:** false

## Inputs

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