> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# widget:scroll-to

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.widgetScrollTo

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.widgetScrollTo

[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1196

<LwTemplate />

## Description

When clicked scrolls to the top of the page or to the specified element
by ID. Styles can be added to fix the scroll to top to the bottom left
right or center of the page by adding the style tag with 'bottom-right'
OR 'bottom-center' OR 'bottom-left'

## Usage

as element:

```xml wrap  theme={"dark"}
<widget:scroll-to
       [scroll-to-id="{string}"]>
</widget:scroll-to>
```

### Directive info

* This directive creates new scope.

#### Parameters

| Param                      | Type       | Details                             |
| -------------------------- | ---------- | ----------------------------------- |
| scroll-to-id  *(optional)* | **string** | The id of the element to scroll to. |