Linking to another page Section (+ a workaround)

Jump to section works great, but jump to a section on another page isn’t yet an easy thing to do in Webflow.

For the moment, I select the target page in the dropdown menu, switch to the first tab (free link) where I instantly find the link to the page I selected in the dropdown (handy) and add #section_ID. It’s not so bad, but if I change something like a page name or slug, it will break.

Tks for listening!

3 Likes

Hi Vincent,

Thanks for your post. I’m new to Webflow and I am having trouble following your instructions. Here’s what I’m trying:

I want to jump to my ‘Contact’ section on my homepage. I’m navigating from a gallery item detail page. I click on the button in my navigation menu ‘contact’ → go to ‘settings’ → link settings → I choose the tab ‘a different page’ → choose the page ‘Home’ from the dropdown menu → go to the tab ‘External website URL’ (with the link icon) → In the input field, I see a forward slash (‘/’) → Now what?

I’m supposed to add something to the input field right, but what exactly. Nothing I’ve tried seems to work’

TIA for your help :smile:

1 Like

If you are linking back to your home page what you need to do is create a link with the URL http://yoursitename.com/#yoursectionid

You can create an ID by selecting the element you want to have the ID and using the ID field in the settings panel to create it.

Hi Davidn,

This doesn’t seem to work for me, but I’m in demosite mode so this could be the problem?

This what I’ve tried so far:

I’ve got a single page Homepage and a gallery item detail page. From the detail page, I want to have a button to go back to the homepage and then scroll down to a specific section (contact for example). I’ve tried making a button on the detail page called ‘contact’. I then add a url next to the link/chain icon of https://webflow.com/design/demositeleo/#Contact. I haven’t checked the ‘open in a new tab’ checkbox, but somehow it DOES open in a new tab and it doesn’t scroll down to ‘Contact’.

Any idea what I might be doing wrong?

Kind regards,

Leoni

Directions for Linking to a Section/Element/Div Block:
Double/Triple Click the section you want to link to:
Add an ID to specify the name of section (in your case Contact).

The link box that surrounds your contact button on the gallery page should link to http://www.whateveryourhompeage.com/#Contact.

That should do it. Let me know if that doesn’t work for you, and I’ll put up a quick video.

2 Likes

Just to clarify further, follow the instruction @mrgovindrai gave you to set the id of the contact section.

Because you want to link back to the home page from an internal page you need to use the external link option.

In the field for the external link type your websites URL with a backslash and the section id preceded with a #

If you are using a Webflow domain the url you will create in the external link field will look something like this. http://www.yoursitename.webflow.io/#contact

If you are using your own URL it will look something like this now loading

Let us know if this clears things up for you.

Alex

2 Likes

I’ll also had that if you’re still having a hard time with this, make sure you don’t have a section with the same name on the page you’re linking out of. I just spent an hour trying to figure out why this simple thing wasn’t working for me - doh!

Guys, tnx for your replies… sorry, I never noticed your msg’s were in or I would have replied sooner…

I’m gonna check out your latest tips after my hols…

Kind regards,

Leoni

Hi,
I’m struggling with getting these links to other pages working on my hosted site even though they work on the preview (mydomain.webflow.io) page.

My links are setup like this - /articles/#Holding_Back and link to an area marked as “Holding_Back” on my page with a slug of “articles”. As I say, on the preview page it functions correctly but on my hosted page with the proper domain I see an error “The requested URL /articles/ was not found on this server.”

Anyone have an idea what I might be doing wrong?

Many Thanks,
Neil

Hi, links to other pages sections IDs have to be written in full starting with http:// with the full domain and path. Also, the #ID part has to follow immediately the url, without a “/” before.

Example: http://www.mysite.com/mypage#mysectionID

Does this solve your issue or did I miss something ?

Hi Vincent,

Thank you for your reply.

I changed the links and I’m still seeing the issue. Slightly different example but when I hover over the image on my published site I see the link as “http://www.top-box.co.uk/articles#should_you” but when I click on it I get the error message “The requested URL /articles was not found on this server.”

I did change the SEO name of my website yesterday. Would this mess things up? When I check the slug value for the articles page it shows as “articles” and the link below says “website.com/articles”. The actual hosted page “http://www.top-box.co.uk/articles.html” seems to load OK and when I check the source I can see this " "

I have just noticed that it affects other links on my site so i’m wondering if the name change has cuased this but don’t know how to correct it :frowning:

Cheers,
Neil

Your complete link, to begin with, don’t work : http://www.top-box.co.uk/articles

When you’ll get a working link, the sublink to the ID will most likely work.

So the working link: http://www.top-box.co.uk/articles.html

And the working sublink: http://www.top-box.co.uk/articles.html#should_you

(:

Thank you once again Vincent, you were correct. I just had to be more specific about my link. Including .html the the end of the page name makes it all work as I had hoped :smiley:

1 Like

So far I can’t see a way to prevent the links opening in a new tab, despite NOT having the checkbox selected. Does anyone have a tip on how to prevent links to other page sections opening in a new tab?

@carlcankite - This can be a browser level user preference specified in the browser preference pane ( Chrome / Safari / IE ) to have all links open in a new tab / or open in a new window / block popups. Be sure to check settings as they will always override any link behavior regardless of the way the URL is constructed.

Nope, it was me! Take the thing out of demo mode and it works fine :grinning:

Thanks for the reply though!

1 Like

Hi,
I did what you said: using a link with an url with #contact.
This works but open and show the section contact, but IN A NEW WINDOW!! Without checking “open in a new window”…

Hi Alex,
I did what you said: using a link with an url with #contact.
This works but open and show the section contact, but IN A NEW WINDOW!! Without checking “open in a new window”…

Any additional action?
Thanks

I’m also having problem with linking to a specific section of the homepage from other pages.

I put the /#ekipa and the link works, BUT MOBILE MENU WILL NOT CLOSE AFTER CLICK ON “EKIPA” LINK in menu

If anyone know solution to this problem please let me know

https://preview.webflow.com/preview/agencija?preview=0fbb8077464c46a64df78462e7d29d2d