---
title: Matrix Block Anchor Craft CMS Plugin
date: 2024-09-09T00:37:00+01:00
author: John Henry Donovan
canonical_url: "https://johnhenry.ie/blog/2024/09/matrix-block-anchor-craft-cms-plugin"
section: Blog
---
Browse by categoryAll PostsWeb DevelopmentDesignLifestyleMusic & FilmTutorialsSpottedSpeakingReviewsFound FoodRecipesIreland

[](/blog)

# Matrix Block Anchor Craft CMS Plugin

Posted on 09th September, 2024

I’ve finally published my fist plugin to the Craft Plugin Store. Its a free plugin that provides a Craft CMS field that enables content editors to create anchor links directly to Matrix Blocks without needing developer assistance.

![Image 2024 08 19 at 11 51 32 PM 2024 08 19 230008 ixhj](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAGCAIAAAAt7QuIAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAhUlEQVQokW2RSQ4EIQwDyxL/f/Bcag5AWJoIsYXYjslPqVj7jCXHOVe6F12zigqINHaCuyq6OJ7xKR7IHV1ofrKb9PE4xJCxf+Ba2od0dRJkPj46UU8fOivhe1/1FUgxtJSmHEZuABGX/Jdl3fYaRQS21HfaoSDXv5x+TJ4dPigeXYwG/APTP4WxeGctegAAAABJRU5ErkJggg==)

![Image 2024 08 19 at 11 50 50 PM 2024 08 19 230009 tueh](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAHCAIAAADmsdgtAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA1ElEQVQokW2RO27FMAwEZynf/6Sp0qSxOSkky35BKIAgBGl/zNf3D7MUREA08zLzJFVJyOwhmV9Uuu3L67KvPk+vc850ax+VBUXA3QOTIwkkE/fp8z0RqEipImMIJl6hWj3GGCCwtMMt3yV/4b8I2A7miSmr7OG47LZbe/o7jipu+D/D42BzsORv2xqIhZa2jomrraBHVZ6A3EndETxhTHje6HNeuSZaExuMpQLHisZP+cp/JQR98a5MvTd+10oPDr034KvvgD8drDUsikfNDbqrN8cvHiTJtllErrEAAAAASUVORK5CYII=)

## Requirements

This plugin requires Craft CMS 4.00 or 5.0.0 or later, and PHP 8.0 or later.

## Installation

You can install this plugin from the [Plugin Store](https://plugins.craftcms.com/matrix-block-anchor) or with Composer.

#### From the Plugin Store

Go to the Plugin Store in your project’s Control Panel and search for ​“Matrix Block Anchor”. Then press ​“Install”.

#### With Composer

Open your terminal and run the following commands:

```php
# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require johnhenry/matrix-block-anchor

# tell Craft to install the plugin
./craft plugin/install matrix-block-anchor
```

## Configuring Matrix Block Anchors

The default prefix for anchor IDs is `blockIdAnchor`, which can be customized in the Matrix Block Anchor plugin settings. In most cases, this default setting works well.

## Using Matrix Block Anchors

Create a new field and choose Matrix Block Anchor as field type.Add this new field to each Matrix block where you want an anchor.

The default anchor prefix is `blockIdAnchor`, which will generate an anchor link in the control panel, such as `#blockIdAnchor-424242`.

In a typical Matrix page builder setup, simply add an ID to your block’s parent div or section. Make sure to update the prefix to match what you’ve set in the plugin settings and seperate with a hyphen from the `block.id` variable.

```twig
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" id="blockIdAnchor-{{ block.id }}">
```

### Matrix Page Builder Resources

- [https://​www​.youtube​.com/​w​a​t​c​h​?​v​=​r​w​3​k​N​g​4CF1g](https://www.youtube.com/watch?v=rw3kNg4CF1g)
- [https://craftquest.io/courses/real-world-craft-cms‑5/197080](https://craftquest.io/courses/real-world-craft-cms-5/197080)

## Sticky Header

Clicking on anchor links (links within the same page) causes the page to scroll. If the scroll is upwards, the linked element might get hidden under the header.

To prevent this, you can define scroll-padding in your CSS:

```css
html,
body {
    scroll-padding-top: 100px; /* set to the height of your header */
}
```

### Share this link via

###### Or copy link

Copy

[ Previous Blog Post

Solpace Podcast: Making The Web A…](https://johnhenry.ie/blog/2024/09/solpace-podcast-making-the-web-accessible-for-all "Previous Blog Post")

[Next Blog Post

Roy Keane Breaks Down Every Red C…](https://johnhenry.ie/blog/2024/09/roy-keane-reacts-to-every-red-card "Next Blog Post")