scrivito / scroll-to-fragment

#️⃣Make single page apps scroll according to the current URL hash.

Scroll to fragment

Make single page apps scroll to the current URL hash.

When you follow a link that ends with a hash fragment (https://example.com#my-headline) on a traditional server-side-rendered (SSR) website, the browser automatically scrolls to the matching element. With JavaScript-driven single page apps (SPA), current browsers do not scroll by default.

This helper provides single page apps with the classic scrolling behavior. It updates the scroll position on load, and checks for updates on clicks and browser history changes. To keep the fragment in line with asynchronously updated content (for example in a ReactJS based app) it also adjusts the scroll position on DOM changes.

Installation

npm install scroll-to-fragment

Usage

In your app's initialization code, for example in index.js:

import { scrollToFragment } from "scroll-to-fragment";

scrollToFragment();

Options

You can customize the behavior with the following options:

import { scrollToFragment } from "scroll-to-fragment";
import { createBrowserHistory } from "history";

scrollToFragment({
  // customize the target of a given fragment ID (default is getElementById):
  getElement: (fragmentId) => document.getElementsByName(fragmentId)[0],

  // adjust the scroll position after history PUSH events:
  history: createBrowserHistory(),

  // customize scrolling behavior:
  scrollIntoView: (element) => element.scrollIntoView({ behavior: "smooth" }),
});

Manual trigger

If you are listening for any other events to trigger a scroll position update, simply call scrollToFragment() again. This will automatically stop the previous instance.

Tips

• Triggering an update on popstate or hashchange may result in unwanted scrolling after browser back and forward navigation.
• If the scroll position after navigating back is wrong, we recommend using a dedicated package like delayed-scroll-restoration-polyfill.

Development

npm run watch

scroll-to-fragment's Issues

dependencies are wrong

hi, there is a misstake in the package.json

• history should be in dependencies
• @types/history should be in devDependencies

SyntaxError: Unexpected token 'export' when using in nextjs

there is something wrong with the build, it still contains export import syntax.

I thought that this work if you specify module entrypoint in package.json, but a short test did not work

In page links are not working

Does this package works for links that stays in the page?
e.g. a button with link target with only #bottom