In-page Anchors

Is there a way to link to an in page anchor like the screenshot below? Currently the system appends https:// to the front.


Hey @jerry.nummi,

At the moment we are not planning to work on that. This is an interesting feedback though that i will track as a feature request.

If we start to work on this i’ll let you know.

Thanks for responding. Am I the first person to make a request for this? I thought linking to another section on a page was a common need.

Do absolute urls work? i.e.

1 Like

No you’re not the only one, We might work on that at some point but this is not in our priority list for now. I understand your point and as @marcellothearcane pointed out. You can use absolute url to manage your anchor at the moment.

Can you give maybe more details on your use case ? If it’s a table of content, we might be able to provide an example for that.

My current use cases are: a sub navigation that links to major sections on the current page; a few links across the site that link to specific sections on other pages.

Absolute URLs will work for me except for localhost development but I can work around that.

1 Like

Hey @jerry.nummi,

For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id’s to my H2’s from my rich texts. Like I do here:

  if (type === Elements.heading2) {
    var id = element.text.replace(/\W+/g, '-').toLowerCase();
    return '<h2 id="' + id + '">' + children.join('') + '</h2>';

You can see a full example here.

Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can easily recreate it in whatever technology:

    <section v-if="sections.length" class="table-of-content">
        <h5>On this page</h5>
            <li v-for="([anchor, text], index) in sections" :key="`section-${index}`">
                <a :href="`#${anchor}`">
                    {{ text }}

export default {
    name: 'toc-slice',
    props: {
		slices: {
			type: Array,
			required: true
    computed: {
        sections: function () {
            const buildAnchor = (text) => text.replace(/\W+/g, '-').toLowerCase()
            return this.slices
                .map((slice) => {
                    if(!(slice.slice_type === 'title' && slice.primary.title)) return;
                    const heading = slice.primary.title.find(elem => elem.type === 'heading2');
                    if(heading) return [buildAnchor(heading.text), heading.text];
                .filter(e => !!e)

Here’s the full file.

Let me know if you have any questions about this.


1 Like