Support for link to an element (href="#element")

[tea-lover-418]

Goals

Some features this would enable:

1. Support for a table of content in long emails.
2. Scroll to top buttons at the bottom of an email.
3. Plenty of other uses of scrolling to elements.

Background

I build newsletters using react-email, and mostly I really love it.

However, the emails can get very long, and to engage readers I'd like to highlight stories at the top for them to scroll to on click. This can easily be done in plain html like this:

<a href="#element">click me</a>
<div id="element">we scroll here</div>

In emails, using id for this does not seem to be supported. No biggy, because the old fashioned name attribute does work.

<a href="#element">click me</a>
<div name="element">we scroll here in an email</div>

However, setting this attribute dynamically is turning out to be near impossible. Setting the name attribute is hard, and hacking it onto it makes values not properly align. This is because the actual email has the href and id with value "element" transformed into "#m_-5288444870739175237_element", yet the name attribute remains "element".
Hacking this using an inspector shows that the setup would work.

Is there something we can do inside react-email to handle this? Some special <ScrollAnchor> component or special attribute?

Proposal

I'd love to contribute if you can direct me what could be done.

[gabrielmfern]

What was the email client you tested on that changed the href like that? Or was it React Email/React that did it?

[tea-lover-418]

@gabrielmfern good point, it may well be the ReSend too. I will do some more digging to investigate that once I have the time.