useScrollTo
Programmatic smooth scrolling helper supporting window or custom scrollable containers, element IDs, selectors, refs, and pixel coordinates.
4.9 KB
•Updated on September 3, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-dom-use-scroll-toUsage
Code
import { useScrollTo } from '@/hooks/use-scroll-to'
// Pattern 1: Direct function call
const scrollTo = useScrollTo()
scrollTo({ top: 0, behavior: 'smooth' })
scrollTo('#section-contact')
scrollTo(500)
// Pattern 2: Helper methods
const { scrollToTop, scrollToBottom, scrollToElement } = useScrollTo()
scrollToTop()
scrollToBottom()
// Pattern 3: Custom scrollable container
const containerRef = useRef<HTMLDivElement>(null)
const scrollTo = useScrollTo(containerRef)
scrollTo('#item-5', { block: 'center' })API Reference
Parameters / Props
| Parameter | Type | Default | Description |
|---|---|---|---|
containerRef | RefObject<HTMLElement|null> | - | Optional DOM container ref to scroll instead of the window. |
Return Value
| Property | Type | Description |
|---|---|---|
scrollTo(target, options) | Function | Scrolls to pixel offset, ID string, React ref, or ScrollToOptions. |
scrollToTop(options) | Function | Smoothly scrolls to the top (0px). |
scrollToBottom(options) | Function | Smoothly scrolls to the bottom of the container or document. |
scrollToElement(el, options) | Function | Scrolls a specific element into view. |
scrollToElementById(id, options) | Function | Scrolls an element with matching DOM ID into view. |