⮌ back | Overview | Home

📜Don’t Scroll on Transition

This is a very simple component that might come in handy if we are further down the page and you do not want to scroll to the top of the page or to an anchor on the page when the user clicks a link.

Contents

Why would I use this component?

In terms of scrolling, view transitions in Astro behave like normal navigation: if you scroll to another page, you jump to the top of the page. If your link had a #fragment id, you then scroll down to that fragment on the page. If you press the browser’s “back” button, your scroll position will be restored to what it was when you left that page.

You can see this component in action in the NoScroll demo and in the Animations demo.

Usage

Install astro-vtbot in your project running npx astro add astro-vtbot or npm install astro-vtbot.

Place the <NoScroll/> component in the <head> of a page near Astro’s <ViewTransitions />. That will prevent scrolling for all view transitions that leave this page to other pages that also have the <NoScroll/> in their head.

MyPage.astro
---
import { ViewTransitions } from 'astro:transitions';
import NoScroll from 'astro-vtbot/components/NoScroll.astro';
---
<html>
  <head>
    <ViewTransitions />
    <NoScroll/>
    ...
  <head/>
  ...
</html>

There are no parameters to configure.

Discussion

Need more fine grained control? Maybe we need an attribute on the link to enable per link control over the scroll behavior. What do you think? Join the discussion↗.