button position should always be on the outside

[schlumpumpie]

Hi everyone,

I have already tried a few things, but never found a satisfactory solution.

How can I make the "top button" (scroll up again by clicking on it) that always appear on the right outside, regardless of the screen width?

Do you have a solution for me?

[Chris M]

You need to place the top button off the page area. If it's sticky it will show on the very edge of the screen. If it isn't sticky, it won't show at all.

If you want the button to not be on the very edge, you can add a rectangle to push it away. make the rectangle 99% transparent and group with the button.

[schlumpumpie]

Hi Chris and thanks for your support.
That works.
But this way the button is always visible.
Is there a possibility that the button is only visible from a certain height or only at the bottom?

[schlumpumpie]

i was able to solve it myself. i only needed to make the link to a named object.
Now it only appears when the object appears.
Thank you Chris you have put me on the right way.

[Chris M]

Certainly. We're going to play with 'Reveal' under the Web Animation section.

What we're going to do:
Use an object to trigger the appearance of your button. Your button will remain hiding until the trigger object pops its head up at the bottom of the screen as the page scrolls.

If you have a picture, or shape that will just come into view when you want your button to appear, then we'll use that. If not, create a rectangle and place it on the page where you want it.
Name the object by: highlight the object and click Utilities > Names and name the object anything you like (I name mine trigger1, trigger2 ect. because I have no imagination).
Now select your button and click Utilities > Web Animation > Reveal/Scroll (tab) > Reveal Animation (radio button) > Trigger Object Name, and choose trigger1, or whatever you named it.
You can choose an animation to have the button appear.

Test and adjust as needed. If you created a rectangle, colour it the same as your background, or give it a 99% transparency.

[Acorn]

If you want the button to not be on the very edge, you can add a rectangle to push it away. make the rectangle 99% transparent and group with the button.

@Chris, there is a cleaner way to move the shape of the browser (right) edge.
Give it a Name of 'top' & add this Page Head code:
<style>
.xr_stickie:has( > a > span[id="top"] ) {
right: 20px !important;
}
</style>
The :has() Pseudo-class is relatively new but it handles things where CSS had a itch before; basically getting to the parent of an element.
You do have to craft it for top, bottom, left or right scenarios. Read https://css-tricks.com/the-css-has-selector/.

Acorn

[Chris M]

@Chris, there is a cleaner way to move the shape of the browser (right) edge.
Give it a Name of 'top' & add this Page Head code:
<style>
.xr_stickie:has( > a > span[id="top"] ) {
right: 20px !important;
}
</style>
The :has() Pseudo-class is relatively new but it handles things where CSS had a itch before; basically getting to the parent of an element.
You do have to craft it for top, bottom, left or right scenarios. Read https://css-tricks.com/the-css-has-selector/.

Acorn

It's always good to have options.

[Andre7]

You need to place the top button off the page area. If it's sticky it will show on the very edge of the screen. If it isn't sticky, it won't show at all.

If you want the button to not be on the very edge, you can add a rectangle to push it away. make the rectangle 99% transparent and group with the button.

I've tried this Chris and i can't make it work. Can you be more detailed please! Thank you

[Andre7]

Well!!! Another Xara pro + glitch. Your soloution works with Xara Designer x19 Chris, but not with xara +.
I seem to work more with xara x19 lately. I come across bugs almost every day in xara+.
Thanks anyway.

[Acorn]

Well!!! Another Xara pro + glitch. Your soloution works with Xara Designer x19 Chris, but not with xara +.
I seem to work more with xara x19 lately. I come across bugs almost every day in xara+.
Thanks anyway.

It works for me in Pro+. You need to Group and set its Export as a single image.

Using @Chris's approach means you get an image and that always annoys me, hence the CSS route I suggested.

If you are hitting Bugs then do report them. Sometimes a method is nuanced and you might not understand the logic behind the feature.

Acorn