Streaming live at 10am (PST)

Skip to main content link

Reading everything I can find about links, skip etc on the Forums and University and the WWW, but can’t find a way to simply add a .

I would like the skip to go to the (only) H1 on the page.

How?

I’ve got my link at the top of the page, and I have a Heading.

I’ve given the Heading a role=“main” but that’s not creating any kind of anchor point to link to.

thanks!

Here is my public share link: https://preview.webflow.com/preview/jonathans-blank-site-71b734?utm_medium=preview_link&utm_source=designer&utm_content=jonathans-blank-site-71b734&preview=aa7262d9cfca903738221d1bc46a02a6&pageId=5d09249de2f0f22cee7d4d84&mode=preview
(how to access public share link)

I came to the same conclusion too. This is what I came up with:

var h1s = document.getElementsByTagName("h1");
h1s[0].id = "skipto";
document.getElementById("skip").href = "#skipto";

It assumes there is a button with id “skip”.
It renames the first h1 (should be 1 anyway)
Then sets the “Skip to Content” button’s href to the newly named h1 tag.

1 Like

interesting. where do you put this code? In the project settings??
I would think a link with id “skip” rather than a button (it’s called a skip link after all!)
I’d also name the H1 “main”, so we can “skip to main”

I like this a lot. Hopefully makes things easier to set up without having to remember to give the id on every page

Thanks

Yes, if you want to easily add it to all pages, then the footer code in project settings would probably be best.

What is the guidance on hiding it visually and have it hidden so that only screen readers can find it?
and how do you hide it via webflow?

hey… sorry for the slow response… it’s all about position. Set the position to a negative and it’ll be off the screen. on focus it should then be shown on screen

Thanks @Jonathan_Holden. I got it working!

That’s brilliant!!!

let’s see… (or not see, as it’s hidden… :wink: