rehype-scroll-to-top

Motivation

Allow users to easily scroll to the top or bottom of a page by adding links to the top and bottom of the page.

Install

npm i -D @benjc/rehype-scroll-to-top

Usage

import rehypeScrollToTop from "@benjc/rehype-scroll-to-top";
import rehype from "rehype";
import rehypeParse from "rehype-parse";
import { unified } from "unified";

unified().use(rehypeParse, { fragment: true }).use(rehypeScrollToTop).process("<h1>Title</h1><p>Content</p>");

// Or with options:
unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeScrollToTop, {
    topLink: { disabled: true },
    bottomLink: {
      text: `Back to top ↑`,
      classes: "animated-link-underline",
    },
  })
  .process("<h1>Title</h1><p>Content</p>");

Input

<h1>Title</h1>
<p>Content</p>

Output

<div class="scroll-to-wrapper">
  <a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
</div>
<h1>Title</h1>
<p>Content</p>
<div class="scroll-to-wrapper">
  <a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
</div>

Options

| Option | Type | Description | Default | | ---------------------- | --------- | ----------------------------------- | -------------------- | | topLink.ariaLabel | string | Aria label for the top link | "Scroll to bottom" | | topLink.classes | string | CSS classes for the top link | "" | | topLink.disabled | boolean | Whether the top link is disabled | false | | topLink.id | string | ID for the top link | "top" | | topLink.text | string | Text for the top link | "Scroll to bottom" | | bottomLink.ariaLabel | string | Aria label for the bottom link | "Scroll to top" | | bottomLink.classes | string | CSS classes for the bottom link | "" | | bottomLink.disabled | boolean | Whether the bottom link is disabled | false | | bottomLink.id | string | ID for the bottom link | "bottom" | | bottomLink.text | string | Text for the bottom link | "Scroll to top" |

These options can be passed to the rehype-scroll-to-top plugin as part of the options object. For example:

rehypeScrollToTop({
  topLink: {
    ariaLabel: "Go to bottom",
    classes: "my-custom-class",
    disabled: false,
    id: "my-top-link",
    text: "Go to bottom",
  },
  bottomLink: {
    ariaLabel: "Go to top",
    classes: "my-other-custom-class",
    disabled: false,
    id: "my-bottom-link",
    text: "Go to top",
  },
});

This will customize the top and bottom links according to the provided options.

License

MIT © benjamincharity