How to link text to anchor on another page

Hi guys,

I have a home page which has a contact section at the bottom, I have managed to create a contact button at the top which links to an anchor which takes you to the bottom of the page, this has been done successfully, However! when I am on my ‘about’ page (completely separate page to the homepage) I still need to click ‘contact’ and for it to take me to the home page BUT then to the anchor on the section where my contact form is at the bottom.

I hope this is clear enough :confused: so basically I have a contact button on my home page which links to an anchor which takes you to the contact form at the bottom of that homepage, however when I am on a seperate page (about page) i still need the contact button to work the same way, however it doesnt give me the option to link an anchor to the contact form on the homepage, is this is a feature only meant to be used on 1 page websites?

thank you

Hey there,

I think I understand what you are trying to do — but there is a solution. Via the dropdown menu options in Webflow, you can (as you have) choose an anchor from the page you are currently on. You want to link to an anchor on another page, so select the link on the about page, bring up the link dialog box and use the regular URL one, and enter:

/home#nameofyouranchor

This will take you to the home page (from any other page) and scroll down to the anchor you need.

Hope this helps :slight_smile:

Steve
STEVE HOLMES
Creative Director
ENERGI.DESIGN

MOTION_WEB_UXUI

Hey, I really appreciate you reaching out! thank you.

I can’t seem to get this to work using this strategy, maybe I’m doing it wrong, is there a way I can allow you access to this site to make this change for me (then I will be able to see how it’s done).

The site is not yet published it’s still in the process of design.

Hi there,

If you can share the site’s read-only link, I can take a look:

https://university.webflow.com/article/sharing-your-sites-read-only-link

Steve
STEVE HOLMES
Creative Director
ENERGI.DESIGN

MOTION_WEB_UXUI

https://preview.webflow.com/preview/bristow-builders?utm_medium=preview_link&utm_source=dashboard&utm_content=bristow-builders&preview=37d454f8b5bc3295e777570a2c252146&mode=preview

Thank you!

Hi again,

Thanks for sharing the link. So, on the About page (or all other pages), you have the Get a Free Quote button in the header and want that to go to the home page and scroll down to the contact anchor, correct?

So, select the button in the header and go to the link settings, choose the URL option, and enter:

/index#Contact-Anchor

Screenshot 2019-11-07 at 19.48.39.png

But, I would also ask why you don’t put the contact form at the bottom of each page (and scroll down using the same anchor option as you have on the home page), or even as a pop-up on all pages? I’d not be too keen to pull the user away from a page they are already on and push them back down the homepage…

Anyway, hope this helps :slight_smile:

Steve

Hi Steve,

Thank you, that’s helped a lot! I completely agree with you, however this is what the client wants (i’ve tried to tell them otherwise).

Thanks again!

Ah well, what the client wants, the client gets — even if it doesn’t make sense :wink:

Happy to have helped! Good luck with the site.

Steve

You’re not wrong there ! :joy:

Just a quick one, will this only work once the page has been published? I’m doing everything you explained correctly but it won’t work whilst in preview mode :thinking:

Sorry to be a pain.

No pain at all — yes, once published (even to the Webflow preview site) it will work. The URL is referencing the finished page name structure, and the home page will export as index.html. So once it’s live on a server, the /index will find the index page, and #Contact-Form ID will find the anchor.

Steve

I thought so, have a great weekend!

Hi Steve, I thought your simple index link should work fine for the homepage, but mine isn’t working unless I do this: /index.html#
Am I doing something wrong?
Thanks in advance! :slight_smile:

Hi Johan,

You need to make sure that next to the # you type the ID you have assigned to the section you wish to scroll to.

#Contact-Form ID

Let me know if it doesn’t work out — you can always share a read-only link of the site and I can take a look for you?

All the best,

Steve

Hi Steve, I understood the hashtag for the ID, but the index just didn’t work for me without the .html
Could it be because it’s now on webflow.io not the ‘real’ URL yet?

Thanks,
Hans :slight_smile:
WeAreJohan is our company name hehe

Ah, hi Hans :slight_smile:

It could be how it’s set up with the .io domain and how the page link is chosen in the links panel. When the site goes live, the page link needs to be typed in as index.html#ID, when doing it on the .io preview site, it should work without the .html.

Do you want to make a read-only link and I’ll take a look a little later for you?

Steve

It would be great if you’d take a look! Here’s the link: https://preview.webflow.com/preview/royal3d?utm_medium=preview_link&utm_source=designer&utm_content=royal3d&preview=9a68973f59a975661e0f75f47c5ba2a1&mode=preview

Can you give me a quick description of where the link is you are trying to set up, from which page to which page and which section ID?

Then I can find it quicker :slight_smile:

Grabbing a bite now and will look shortly for you.

Steve

All the anchors are on the homepage and they are linked from within the nav, links are #services #about and #vacancies Hope that helps!

Hans

Hi Hans,

Quick question — is this to do with the links not working when you are in preview mode within WF, or when viewing the .io site? I checked the preview site (royal3d.webflow.io) and the links are working?

Steve

Hi Steve,

Sorry about the late response, we are are eating right now :slight_smile:

I checked the io site and everything is working with the .html attachment, without I get a 404