scrollToSelectorWithFallback

scrollToSelectorWithFallback(selector) behaves like scrollToSelector but falls back to scrollToTop when the selector matches nothing. Part of pota/use/scroll.

Arguments

Argument Type Description
selector string CSS selector for the scroll target.

Returns: nothing.

Examples

Scroll with a fallback to the top

Tries to scroll to a selector that may or may not exist; when it is missing the page scrolls back to the top instead.

import { render } from 'pota'
import { scrollToSelectorWithFallback } from 'pota/use/scroll'

function App() {
	return (
		<div>
			<button
				on:click={() =>
					scrollToSelectorWithFallback('#maybe-present')
				}
			>
				scroll, or jump to top
			</button>

			<div style={{ height: '120vh' }}>spacer</div>

			<section id="present">present section</section>
		</div>
	)
}

render(App)