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.