Section

SPAish provides GitHub-style anchor links for section headings, adding clickable # links that appear on hover.
Try it: hover over any heading above or below the # that appears is generated by SPAish after page load.

How To Use

Add the script to your page:

<script src="https://cdn.jsdelivr.net/npm/@wolframkriesing/spaish@2.1.0/_dist/spaish.min.js"></script>
<script>
  spaish.section.addAnchors();
</script>

This will automatically:

• Add IDs to all headings (h1-h6) that don't already have them
• Add hover-activated anchor links with # symbol
• Position anchor links to the left of headings

Important: Call addAnchors() or addIds() immediately after page load to ensure URLs with hash fragments (e.g., page.html#section-my-heading) can jump to the correct heading when the page loads.

Individual Functions

Add IDs Only

If you want to add IDs without anchor links, use:

spaish.section.addIds();
// Or with custom prefix
spaish.section.addIds({prefix: 'my-prefix'}); // The default prefix is 'section'.

Adds auto-generated IDs to all headings based on their text content.

Add Single ID

const heading = document.querySelector('h2');
spaish.section.addId({node: heading});
// Or with custom prefix
spaish.section.addId({node: heading, prefix: 'my-prefix'});

Adds an ID to a specific heading element.

Add Single Anchor

const heading = document.querySelector('h2');
spaish.section.addAnchor({ndoe: heading});

Adds an anchor link to a specific heading. This automatically calls addId() first if the heading doesn't have an ID.

Generated IDs

IDs are created by converting heading text to slugs:

• "My Heading" becomes section-my-heading-0
• Special characters are removed
• Spaces become hyphens
• Text is lowercased
• A string like -0 is appended to ensure uniqueness if multiple headings have the same text

Customization

You can customize the constants defined in the module:

// Customize the ID prefix (default: 'section')
spaish.section.ID_PREFIX = 'my-section';

// Customize the anchor text (default: '#')
spaish.section.ANCHOR_TEXT = '¶';

// Customize the flag name that is being set in the `data-*` attribute of the anchor link, to manage the SPAish event handler.
spaish.section.HAS_SECTION_ANCHOR_FLAG_NAME = 'myCustomFlag';

Styling

The anchor links are positioned absolutely and styled with:

• # symbol (customizable via ANCHOR_TEXT)
• Positioned to the left of headings
• Visible on hover
• Automatically removed when pointer leaves