Linking to a specific element

Community resources General
1

Hi there,

is it possible to link a specific element?
I would like to link an element in the footer of my page to a specific element in the FAQ-Section. I know I can link to a section but is it also possible to link to a specific element in the section?

Thanks
Kristijan

2

Yes, just select the element and give it an ID like you would a section.

2 Likes
3

Hey, yeah but it won’t link directly to that element, like zoom into it or anything :slight_smile: It’ll link to the section or parent that it’s in. It will go to that section in the viewport. If there are multiple elements that you want to link to, it’s better to simply use the parent section for all of the them, instead of adding attributes to each and every element. That will get cumbersome. Use this tutorial:

1 Like
4

@SunbearStudio has it right.

If you add a hashtag (fragment identifier) to the end of your URL, your browser will try to locate and scroll to either an anchor <a name="my-hash"></a> link, or an element id.

You can add a unique ID to any element in Webflow, therefore you can also hashtag-scroll to it. The caveat is that in the designer, Webflow’s in-built linking probably won’t recognize your id, or make it an option in the list. Rather you’ll have to link to an explicit URL like;

/my-path/my-page#my-hash

This forum page you’re reading now contains id’s like this;

   <div id='post_3' itemscope itemtype='http://schema.org/DiscussionForumPosting' class='topic-body crawler-post'>

If you scroll to the very top, and add #post_3 to the end of the URL in your browser navigation bar, it will tell the browser to scroll that div into view.

2 Likes
5

Thank you for your detailed answer!
I tried it yesterday like you wrote it in your post, but there was a problem with one of the elements I linked in the footer. I linked two elements in the footer, which are both in my faq-section. One of the footer-elements linked succesfully, but the other linked me to the beginning of the page. The id for this element was “faq-RPA-as-a-Service” but like I said it linked me to the beginning of the page but I copied the id of the element and pasted it to the footer-element. So the reason why it didn’t worked couldn’t be that I linked the false id or mistyped it. Today I renamed the id and now it works. Did I make a mistake by giving the id the value “faq-RPA-as-a-Service”? Like having to many hyphen or capital letters? Because I can’t explain myself why it works now with another id value. Do you have an idea why it didn’t worked with the id-value “faq-RPA-as-a-Service”?

6

I was wrong. It don’t worked. Now the link to the id I renamed worked, but the other don’t work anymore. Now the other linked me to the beginning of the page… :thinking:

7

Ok I found out it’s a problem because of the tabs I used in the FAQ-section. It looks like it can only linked to an element in the FAQ-section if the id I linked to is in the active tab. But is there maybe a way I can it also linked to an element which is in the inactive tab?

8

I was about to guess that it had something to do with hidden content.
Any time you link to a #fragment the browser is trying to figure out where it is in the page. If the content is hidden than the browser may well decide it’s at 0,0, and scroll accordingly.

Whatever you’re linking to, you’ll want to make certain it’s visible before you attempt the navigation. That’s tricky with things in tabs, accordions, modals, and other collapsible elements.

9

I solved it! It was not easy but with customer JavaScript-Code it works now.
I gave all the Tabs-elements and its content a specific id and set the attributes and class-name of them like I need it and at the end I call the URL with the id I need. So maybe someone will have the same problem as I so I will share my solution.

Here is my customer JavaScript-Code:

window.onload = function(){
//Footer-Links-Elements
var partnerangebot = document.getElementById(‘footer-partnerangebot’);
var rpaasaservice = document.getElementById(‘footer-rpaasaservice’);

//Tabs

var faq_allgemein = document.getElementById(‘faq-tab-allgemein’);
var faq_integration = document.getElementById(‘faq-tab-integration’);
var faq_service = document.getElementById(‘faq-tab-service’);

//Tabs-Content
var faq_allgemein_content = document.getElementById(‘w-tabs-0-data-w-pane-0’);
var faq_integration_content = document.getElementById(‘w-tabs-0-data-w-pane-1’);
var faq_service_content = document.getElementById(‘w-tabs-0-data-w-pane-2’);

if(partnerangebot.onclick = function() {
faq_allgemein.setAttribute(“aria-selected”, “false”);
faq_service.setAttribute(“aria-selected”, “false”);
faq_integration.setAttribute(“aria-selected”, “true”);

faq_allgemein.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_service.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_integration.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");

faq_integration.classList.add("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_service.classList.add("tab-link-3", "w-inline-block", "w-tab-link");
faq_allgemein.classList.add("tab-link-3", "w-inline-block", "w-tab-link");

faq_allgemein_content.classList.remove("w-tab-pane", "w--tab-active");
faq_integration_content.classList.remove("w-tab-pane", "w--tab-active");
faq_service_content.classList.remove("w-tab-pane", "w--tab-active");

faq_allgemein_content.classList.add("w-tab-pane");
faq_integration_content.classList.add("w-tab-pane", "w--tab-active");
faq_service_content.classList.add("w-tab-pane");

partnerangebot.setAttribute("href", "https://yoururl.com/#faq-integrationsprozess");

});

if(rpaasaservice.onclick = function() {
faq_allgemein.setAttribute(“aria-selected”, “false”);
faq_service.setAttribute(“aria-selected”, “true”);
faq_integration.setAttribute(“aria-selected”, “false”);

faq_allgemein.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_service.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_integration.classList.remove("tab-link-3", "w-inline-block", "w-tab-link", "w--current");

faq_integration.classList.add("tab-link-3", "w-inline-block", "w-tab-link");
faq_service.classList.add("tab-link-3", "w-inline-block", "w-tab-link", "w--current");
faq_allgemein.classList.add("tab-link-3", "w-inline-block", "w-tab-link");

faq_allgemein_content.classList.remove("w-tab-pane", "w--tab-active");
faq_integration_content.classList.remove("w-tab-pane", "w--tab-active");
faq_service_content.classList.remove("w-tab-pane", "w--tab-active");

faq_allgemein_content.classList.add("w-tab-pane");
faq_integration_content.classList.add("w-tab-pane");
faq_service_content.classList.add("w-tab-pane", "w--tab-active");

rpaasaservice.setAttribute("href", "https://yoururl.com/#faq-rpaasaservice");

});
}

1 Like