Link scroll down with dynamique content

Ask the community
1

Hello everyone,
I’m working on a blog project in which the articles are structured as follows on airtable :
H1
Text 1
H2
Text 2
H2
Text 3

Etc.

On softr I use a dynamic data block in which I can map all the data related to my article.
On the other hand, I want to add a summary that includes links to the corresponding part of the article. This is where it gets complicated, I only use one dynamic list detail block to display my entire article. How can I link to the right part of the article, without the page refreshing with each click?
Thank you very much for your help.

2

You’re talking about HTML anchors. As far as I can tell you can only do anchor links to a block, not to dynamic content within a block. Links (Page, Block, and External Website) - Softr Docs

Alternatively you can do each blog article as static blocks per the docs How to create a blog - Softr Docs

@dcoletta thoughts?

3

I think I get what you’re asking, but one thing I’m not clear on is whether you want your summary of links to be part of the list details block, or whether you want it to be somewhere else in the page, on another block.

I am not sure it matters which one you want, though. Either way, if I were trying to do this, the approach I would take is to insert named anchors into my article, any place I need to be able to link to. And then I would link to those named anchors from wherever I put my summary.

A named anchor looks like this: <a name="MyExcellentSection">My Excellent Section</a>

And a reference to it looks like this <a href="#MyExcellentSection">Go To My Excellent Section</a>

4

Hello, thank for your answer.
I try your solution, but that don’t work :confused:

5

Can you post a link to a page (that I would have access to) that isn’t working?

6

Hello, I just saw your message. Thanks for your help :slight_smile:

Below is a link to a test page

I look forward to hearing from you,

7

You were so close!

There are some places that look like this: <h2 id="#title2">Titre 2</h2>

If you remove the # so it looks like this you will be good: <h2 id="title2">Titre 2</h2>

8

Thank you very much :slight_smile: Everything works perfectly :slight_smile:

1 Like
10

hi @dcoletta,
jumped onto this thread as I am trying to make this work across pages.
I basically am using this to link to the bookmark on another page. Any clues to what is not correct?

<a href="https://xxx.preview.softr.app/working-style#Comms">Comms channels</a>

Bookmark on other page:

<a id="Comms">Comms Channel</a>

thanks so much.

11

I don’t see anything obviously wrong here. If I were seeing this problem, the first thing I’d check is to try it in published pages, because I have a vague feeling that maybe the preview mechanism is interfering.

12

Thanks for that. That wasn’t the problem. I hadn’t renamed the relevant block (feature-grid1) to be the same as the anchor ID. It’s working now.

Happy holidays :wink: