Archived topic
Anchor link
7 replies · Started by jm1991 on June 6, 2020
Hi,
I've enabled smooth scrolling and would like to anchor people down to certain sections of my page.
As you can see from the URL I've submitted, I'd like to anchor people down when they click "REGEXMATCH a single word" to the relevant section. Ideally people would be anchored down to the h3 of each relevant section.
There's just one example there, but I'd implement for all 8 sections that Start with a h3 tag.
I've tried playing around, but can't make it work.
Thanks
Hi there,
This is what you are using:
<a class="smooth-scroll" href="#a single word">REGEXMATCH a single word</a>
You can't have spaces in href so it would need so be something like this:
<a class="smooth-scroll" href="#a-single-word">REGEXMATCH a single word</a>
I don't see any <h3> title with the matching id a-single-word?
Hey Leo,
I've tried a few different variations based on your recommendations, but I still can't seem to make it work.
Hi there,
create your link like so:
<a class="smooth-scroll" href="#jump-title">Link to the jump title ID</a>
Then your title should look like this:
<h3 id="jump-link">The jump link position</h3>
You must ensure your links href="#jump-title" matches the elements id="jump-link"
Hi David,
Thanks for your response. The heading section(s) I want to link to uses the ordered list and strong tags, so again, I've been playing around with the html without much success.
This is the code snippet for an example heading section:
<h3><ol><li><strong>An example heading</strong></li></ol></h3>
Let's say I want the ID name to be id="example-id">
And whilst we're at it, I'm going to write the html for the link that will anchor someone down to a heading, so that you can fix anything I've done wrong:
<a class="smooth-scroll" href="#example-id">An example heading</a>
Cheers.
If this is your link ( as above ):
<a class="smooth-scroll" href="#example-id">An example heading</a>
Then ID gets attached to any of the HTML you wish - but for readability its best added to the Heading:
<h3 id="example-id"><ol><li><strong>An example heading</strong></li></ol></h3>
Amazing! I did try the above before, but I must have done something wrong. Either way it now works.
Keep up the awesome customer service guys!
Glad we could be of help
