Navigation links or buttons to jump to each section of markdown page

support
1

I have a page with data from markdown file.
I would like to create links or buttons on top of the page.
If I click the link or button, it will jump to each section of the markdown page.
The links or buttons will stay visible on the top when you scroll the markdown page.
This will allow you to jump to each section anytime you want.

Anyone knows how to implement this?

2

Hi, do you mean something like a table of contents for the current page, like in the Hugo docs?

You can include {{ .Page.TableOfContents }} in your page templates (with the proper html formatting as needed), or you can add it to a shortcode and include it only in pages where you needed.

3

Yes, it is similar to that but I want the toc to be on the top of the page all the time when I scroll down the page.
I also want to change to custom wording of the toc link, for example Just Drink links to ##Drink in markdown file.
I also want to format each link in toc, for example change the link text color or create a button to each link in toc.
And because I want it to be on top of the page all the time, I prefer it in horizontal instead of vertical the way it is now.

So how can I get into each link of {{.TableOfContents}} so I can format it?
Where can I find more detail about this {{.TableOfContents}}?
In Hugo doc, I don’t find a lot of information there.

4

You can find some info about it at https://gohugo.io/content-management/toc/ .
I’m not a hugo guru, but what you write seems to be quite heavy customization.
I haven’t tried these yet, but these articles might be interesting for you: