sticky at top....I need the opposite

[rhdpre07]

sticky at top....

I need the opposite

You can leave an object at the bottom of the screen....(I understand that the top is easy...)

[Acorn]

sticky at top.... I need the opposite
You can leave an object at the bottom of the screen....(I understand that the top is easy...)

All you do it place the objects at the bottom of the page and make them Sticky.

If, in the design, you are changing the page length then you also ensure you Autofit to page > Bottom.

Acorn

[Initiostar]

All you do it place the objects at the bottom of the page and make them Sticky.

If, in the design, you are changing the page length then you also ensure you Autofit to page > Bottom.

Acorn

@Acorn - curious to check out the concept of a sticky mobile menu sliding-in from the bottom: https://initiostar.co.uk/demo/menuFooter/ - it does sit at the bottom of a browser window; I used the usual animation trick of adding the animation to the objects on the MouseOff layer and copying them to the Menu(lock) layer.

With anchor buttons on a single page, I looked at using a JavaScript link; something like: javascript:document.getElementById("#xl_Section3") .scrollTo({top: 0, left: 0 behavior: 'smooth' });xr_ppc("xr_xp4");

The intent to automatically close the popup menu at the same time at scrolling to the target anchor; could not get it to work for me (doubtless a senior moment)!

Any thoughts on where I have gone wrong?

Botton_Menu_Footer.xar

Thanks,

[Acorn]

Gary, it was mostly right. Missing a comma or two and the wrong anchor.

I think javascript: document.getElementById("Section3").scrollTo({top: 0, left: 0, behavior: "smooth",}); xr_ppc("xr_xp4"); should be good but I cannot get the scrollTo to fire.

I'll have to dig out my past efforts to check it over.

Acorn

[Acorn]

@Gary, element.scrollTo does not want to play.

In the end I used, javascript: document.getElementById("Section2").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4");

This does not take the Sticky NavBar into account so you have to place the anchor higher.
Xara actually does in its Anchor jumps, a thing I highlighted some time back.

Acorn

[Initiostar]

@Gary, element.scrollTo does not want to play.

In the end I used, javascript: document.getElementById("Section2").scrollIntoView ({ behavior: "smooth"}); xr_ppc("xr_xp4");

This does not take the Sticky NavBar into account so you have to place the anchor higher.
Xara actually does in its Anchor jumps, a thing I highlighted some time back.

Acorn

https://initiostar.co.uk/demo/menuFooter/

Thanks Acorn, yes this works and I added a style to compensate for the sticky NavBar - but not sure how to shorten the code to have the same style apply to all the IDs

<style>
#Top{
scroll-margin-top: 63px;
}
#Section1 {
scroll-margin-top: 63px;
}
#Section2 {
scroll-margin-top: 63px;
}
#Section3 {
scroll-margin-top: 63px;
}
</style>

The upside to all this is: you can simultaneously close the popup menu at the same time as moving to any anchor on the SAME page. Xara already does it as you say, but it's a bit more tricky when the menu is on a popup and you want to close the menu when moving to an anchor.

The style also seems consistent in that it always places any anchor at the designated height from the page top.

Interesting and thanks for your help - a useful trick!

[Acorn]

Gary, the shorter version:

<style>
#top, [id|="Sect"] {
scroll-margin-top: 63px;
}
</style>

Acorn

[Initiostar]

Many thanks for your help Acorn,

[Acorn]

Many thanks for your help Acorn,

Thank you. I forgot to mention that the 'Sect' allows for any number of Section anchors.

Acorn

[Initiostar]

@Acorn, I did implement the shortened code, but it fails to action; it works with the long version OK, not sure where I have gone wrong? Botton_Menu_Footer.xar

This is the long version live: https://initiostar.co.uk/demo/menuFooter/

Any thoughts?