https://github.com/benjamincharity/rehype-scroll-to-top

A Rehype plugin designed to add customizable "Scroll to Top" and "Scroll to Bottom" links to HTML documents, enhancing navigation for long content pages. It allows for detailed configuration of the links, including their text, ARIA labels, and CSS classes.
https://github.com/benjamincharity/rehype-scroll-to-top

markdown markdown-to-html rehype-plugin

Last synced: 11 days ago
JSON representation

A Rehype plugin designed to add customizable "Scroll to Top" and "Scroll to Bottom" links to HTML documents, enhancing navigation for long content pages. It allows for detailed configuration of the links, including their text, ARIA labels, and CSS classes.

• Host: GitHub
• URL: https://github.com/benjamincharity/rehype-scroll-to-top
• Owner: benjamincharity
• License: mit
• Created: 2024-02-03T01:59:12.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-11T00:14:02.000Z (9 months ago)
• Last Synced: 2024-10-13T14:29:36.888Z (26 days ago)
• Topics: markdown, markdown-to-html, rehype-plugin
• Language: TypeScript
• Homepage:
• Size: 172 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rehype-scroll-to-top

![test workflow](https://github.com/benjamincharity/rehype-scroll-to-top/actions/workflows/test.yml/badge.svg)

[![codecov](https://codecov.io/gh/benjamincharity/rehype-scroll-to-top/branch/main/graph/badge.svg?token=T3Z18P56LV)](https://codecov.io/gh/benjamincharity/rehype-scroll-to-top)

![NPM Version](https://img.shields.io/npm/v/@benjc/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

```typescript

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("
Title
Content
");


// Or with options:

unified()

  .use(rehypeParse, { fragment: true })

  .use(rehypeScrollToTop, {

    topLink: { disabled: true },

    bottomLink: {

      text: `Back to top ↑`,

      classes: "animated-link-underline",

    },

  })

  .process("
Title
Content
");

```


### Input

```html

Title

Content

```


### Output

```html



  Scroll to bottom



Title

Content



  Scroll to top



```


## 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:

```typescript

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][license] © [benjamincharity][author]

[license]: license

[author]: https://www.benjamincharity.com