link to heading on a different page

[zawadil]

Hi Acorn,
as I already wrote within my last thread, I am not able to make links to headings between different pages working.
The small sample has just two pages, ea. 960px and 480px. Link to a heading on the same page works, but a link to a different page, just shows the top of the linked page and doesn´t move to the related heading.

I think I can remember, that I have seen it partially working in the past, which means it worked for the desktop version (>=960px) but not for the mobile version (480px) at the same time. This time, with my sample it neither works for the desktop version nor for the mobile version.

In general it would make my work easier with bigger web sites to handle all links for both versions (desktop and mobile) .

Thank you in advance for your assistance.

Best regards
Erwin

a short add:
Playing around with my sample, I see different 3 different behaviors
a) works: positioning is fine, the heading is visible
b) partially works: positioning is not correct, as below the heading / the heading is not visible
c) does not work: just jumps to the top of the related page as I mentioned above

[Acorn]

Erwin, I Previewed your pages and all Heading Links across Main and Variant work properly.
I even added a repeating Sticky Table of Contents and its Links also jumped between pages.

All I can imagine is your Browser is getting clogged up with prior revisions.
You can try pressing Ctrl+F5 to clear the browser cache.

What also works for me is closing and re-opening the Xara application.
This way, the built-in server path is changed and so there should be no prior cache to clear.

Acorn

[zawadil]

Acorn, this is very strange.
Instead of proper working I only can see the 3 different bahaviors as I already described

a) works: positioning is fine, the heading is visible, this happens rarely, mostly only after using the browser back button in combination wiith Ctrl+F5

b) partially works: positioning is not correct, as below the heading / the heading is not visible - for me it seems the positioning adds 120px (60+60px desktop version) and 140px (80+60px mobile version)

c) does not work: just jumps only to the top of the related page

I have placed my sample to a separate sub directory of the public available website at

https://www.astco.com/eval/index.htm

to avoid any influence, maybe caused by my local test enviroment.

I want to ask you to try the above address.

Thank you in advance for your assistance.

Best regards
Erwin

[Egg Bramhill]

Hi Erwin I can see the issue you're having and it's being caused by the sticky bits at the top. Whilst on the Home page clicking on either 'overall' or 'terms' does scroll down correctly to that section allowing room for the stickies. However when you go to Page 1 and click to link back to 'overall' or 'terms' on the Home page Xara doesn't allow the gap for the stickies when rendering the page thus the anchor is at the very top with no allowance for the stickies.

To check, remove the stickies from your draft page on all pages and the links work correctly.

The only way I can see around this is to add additional return links but it starts to become a dogs-dinner very quickly.

example xar attached.

VIDEO

[Acorn]

@Egg, thank you for spotting what I missed.
Any jump to an Anchor places the Anchor at the top of the page, here, under the menu bars.

There is a CSS solution that appears to work for this example design.

The deepest top menu is on the Variant and is 140px; Main is 120px.
Having two different height complicates matters so I settled on the largest.

Add this CSS to Website Page (code):

<style>
[id*="HeadingAnchor"] { 
  scroll-margin-top: 140px;
} 
</style>

[zawadil]

Hello Egg, hello Acorn,

1st of all thank you for your support.
Espacially @Egg, preparing a video to explain, is impressive and finally brought me to the track.

But let me explain,
1) it was already my initial suspicion, that the sticky objects cause the problem
2) Playing around with Egg´s .xar I found no major improvement, which means it works sometimes, but not all the time
3) I used Acorn´s CSS in my own sample and have seen the same result
4) That was the point, where I´am started to go around circles. From Egg´s video I had in mind, that he used Firefox, whereas I always use Chrome. I tried it it with Firefox too and ´BINGO´.
5) I added the CSS to my own sample file, which can be found again at

https://www.astco.com/eval/index.htm

You can use both browsers side by side and see, that with Chrome it sometimes work but all the time with Firefox.

Although the CSS from Acorn is genious to fix it, I will not be able to use this function, with this cross-browser incompatibility

In general and for my understanding, link to heading on a different page faulty effected by sticky objects on the top of a page is basically a fault of Xara Designer Pro X and should be reported to the developers.
Whereas the need to have same sized sticky objects for desktops and mobile is actually also a weakness.

Thank you both again for your engagement.

Best regards
Erwin