Is there a way to automatically add a class to in-page anchor tags?

I’m working on trying to fix the in-page anchors within modx. I’ve already added a plugin that fixes the problem. But my pages have a fixed header with a search bar that I’m trying to code some css for to fix it.

How can I change modx to automatically add a class to that <a> tag? Something like .anchor-fix or something.


How are you generating the <a> tags? If through getresources or pdoResources can use the snippet template and class properties.

it’s added in automatically when creating the link. But instead, i’m selecting the anchor from the dropdown.


Is that Tinymce? There should be a way to configure it to have a Class dropdown in that Insert Link modal.

This what I have on a site with TinymceWrapper installed:

Edit: I see that you had asked about a way to automatically add the class though… This won’t help with that.

You should be able to target the anchor tags even without a class by using something like this in your css:

a[href*="#"] { your:styles; }

(untested, but it should look for all anchor tags that have # in the href)

1 Like

This basically works without the extra work for something that is not often used. Modx is weird about it though in that it creates an <a> tag with an ID only rather than an href. So as long as my IDs contain the word “bookmark” this will work fine. Maybe making a template variable that automates some of this too.


Oh, I thought you wanted to put a class on the link to the anchor, not the anchor in the page.

That’s Tinymce creating the page anchor as a link tag plus ID, no href. (It’s valid, but kinda ugly imo. Technically any element on the page with an ID is an anchor, so why use a link tag when it’s not actually a link.) Redactor lets you use IDs on any element as anchors.

Anyway, Tinymce does have a setting called visual_anchor_class that allows for a custom class on anchors, which I think is exactly what you’re looking for. Don’t know if your Tinymce extra allows for configuring it though. Probably TinymceWrapper would.

Edit: nevermind it looks like that class is only for the appearance within the editor window. :frowning:

Also, i had to amend the CSS for the empty anchor tags a bit. For some reason iOS Safari doesn’t accept empty <a> tags that use padding. So instead of this:

.anchor {padding-top: 5em;}

I did this and it worked fine:

.anchor {
display: inline-block;
height: 5em;
margin-top: -5em;