Having trouble linking to anchor tag on a page

Hi all,

I’d also like to achieve a link to a specific point on another page.

So I have tried this with the Anchor stack but it’s not working for me and not sure where I’m going wrong.

The Anchor stack has been placed on the Services page at the point on the page where I’d like the link to jump to and the anchor name is retail.

I have placed a Button with the following url link.
https://draftv3.kiteconstruction.org.uk/services/retail

But when testing in preview and I click on the button it doesn’t jump to that section on the other page named Services.

Not sure what I’m doing wrong here but would appreciate your advise.

Many thanks,
Scott

Hi there @scottf – That isn’t going to work in preview mode, as you’re linking to a live URL on your server. You will have to publish the page to test your anchor link. That said you’ll also have to provide the anchor tag in your URL as well. Let’s say your anchor tag ID is myanchor… if that is the case then your URL would be:

https://myurl.com/#myanchor

Also, you can give the Anchor tutorial video here on the Potion Pack page a watch: Potion Pack of Addons for Foundry

1 Like

Hi Adam,

Ok thanks.
I have just published the test site.
https://draftv3.kiteconstruction.org.uk/

The Button is on the Home page and the Anchor is on the Services page, so I have changed the anchor tag to https://draftv3.kiteconstruction.org.uk/services/#retail but it doesn’t link to page or the section. I just get the 404 page.

Not sure…if that is correct…well it obviously isn’t.

What should I have the url as??

Cheers Scott

Have you published the services page? Because when I visit the services URL (https://draftv3.kiteconstruction.org.uk/services/) there is no page there.

Mmm that is weird…yes I have published it.

https://draftv3.kiteconstruction.org.uk/services.html

Yes, the link you have https://draftv3.kiteconstruction.org.uk/services/ doesn’t work but my link above with .html does work.

The Home page works and links to the Services page and other pages.

Why is that…sorry for my ignorance.

Thanks

You’ve used services as the file name, which isn’t standard. You should really use index as the file name. With that said, your link URL has to be:

https://draftv3.kiteconstruction.org.uk/services.html#retail

Not having the file name set as index means that people will have to type https://draftv3.kiteconstruction.org.uk/services.html specifically to go to that page instead of just typing https://draftv3.kiteconstruction.org.uk instead.

I would suggest naming the page index.html instead and then you can also just use https://draftv3.kiteconstruction.org.uk/services/#retail for your anchor link.

1 Like

Hi Adam,

Ok, I’ve been getting it all wrong for years now. When I first started using RW I watched some tutorials and it was suggested that the naming convention should be index.html only for the Home page and other pages to be renamed such as the attached screen shots. So Services page would be Folder name / and the Filename services

Then any subpages under Services would be Folder name /service and the Filename whatever_page

If I change the Filename to index.html I get a warning saying that Possible Page Conflict with the home page.

I am really confused on the naming convention for each page now.

I am going to have to go back to RW 101 school.

Cheers Scott

Sorry that someone lead you down that path. It is a valid thing to do, but it is not the standard method.

For your services page, as an example, the folder should be named services, and the filename should be index.html.

Every page should have a folder name, except the main home page. All pages should be index.html, or index.php (if your page uses PHP).

1 Like

Hi Adam,

Sorry more questions…

I have changed the link to https://draftv3.kiteconstruction.org.uk/services.html#retail

And now that works, it jumps over to the Services page and lands about right but instead of opening where I have put the Anchor stack it opens a little bit down. I have tried different margin and padding settings but can’t get it to land where I want it. I have tried putting the Anchor stack in a Container, not in a Container and also in the Container above where I want it to land but no luck.

Each of the Buttons Retail, Commercial, Residential on the Home page all land in slightly different spots on the Services page even though the settings are the same.

Where is it best to place the Anchor stack, so it opens as per the screenshot below, so the Retail section is just under the menu bar.

Cheers Scott

HTML anchor tags jump right to the exact location of the anchor. There is not an offset for HTML anchor tags. You could place some kind of spacing between your anchor and the elements below that anchor, but that spacing will always be there, even when not using the anchor link. This is just how anchor tags work.

@scottf-- Also, I know you were replying when I posted this reply, so be sure to go back up and read it, too.

Thanks so much again.

Yes I saw your response to my naming convention methods…I will need to change my settings on my other sites.

In regard to the placement of the Anchor stack. In each case I have it just above the section I want the link to jump to but as per these new RW page screenshots in each case it lands slightly off…even though placement is the same each time just above the Retail section, then just above the Commercial section and just above the Residential section.

So not sure why they are landing off from the exact anchor location?

Without seeing the resultant page in your browser it is hard to tell anything. Shoot me a screenshot of that too for comparison, or just send me the latest URL you’re looking at. I’d guess and use the old one, but I have no idea what you may or may not have changed, so would rather not guess at it.

This is the Home page link with the 3 buttons Retail Commercial Residential under “Our Specialty Skill Sets”

https://draftv3.kiteconstruction.org.uk

And this where each one lands…screenshots below but as per the previous message and screenshots each Anchor is just above the section with the image.

Thanks

Yes, it is jumping exactly where you placed the anchor tag. When you jump to an anchor the browser scrolls that spot to the very top of the page with no offset whatsoever. You happen to have a sticky navigation on the page, too, which means it is always at the top of the page and is going to overlay the content. You can place margin on an element to create spacing, but as I mentioned in a previous post, doing so will have that spacing on the page at all times. There is no offset functionality when it comes to HTML anchor tags.

Hi Adam,

Ok thanks.

What I don’t understand is why the anchor links get further off their mark on each link.

The first Retail is little bit off, the next Commercial is off about double again and then Residential is well and truely off from where the Anchor is actually placed.

Why is that?

Thanks

Hi Adam,

Sorry ignore that previous message…it seems that Safari wasn’t really displaying correctly. Even though I had refreshed the page it seems that Safari is caching as when I looked on Chrome it was looking ok.

Cheers Scott

No problem. So everything is working as it should now then?

Well not really…but I’ve tried to place the anchors to offset where it is opening the link.

What I still don’t understand is why the anchor links get further off their mark on each link.

The first Retail is little bit off, the next Commercial is off about double again and then Residential is well and truely off from where the Anchor is actually placed.

Why is that?

Thanks

When looking at your ‘Residential’ link for example, it appears that it is located above the “we have extensive knowledge…” paragraph of the previous section. It’s a bit hard to tell in the attached image but that is what I am seeing.
The little downward triangle in the black box is showing where the anchor is placed and that’s right where the browser scrolls to for me…