Overlay scroll to top button requirement

[jaymehta-twilio]

Hello team,

We have a requirement to provide a scroll to top button for one of the page. Are there any guidelines or overlay provision in today's Paste component ?

[zahnster]

Hi @jaymehta1986,

Can you provide some additional context? Is it that you are hoping the 'Back to top' button will be affixed to the viewport (ala, position: fixed) when the user scrolls down?

[jaymehta-twilio]

yes, the screenshot is based off of the designs but that's the goal. It'd be great to be rendered within an overlay.

[richbachman]

Hi @jaymehta1986

Following up on this one. After discussing with the team, we don't think we will be providing a component for this since this more of a layout consideration.

That said, I think you could accomplish something like this with Paste components. You could place the Button in a fixed position Box, so it always stays at the bottom right of the viewport. You'll mainly need to be careful about what content the button might cover up. You could tie into the scroll position to change the opacity of that Button, so it only shows up based on scroll.

Let us know if that helps, and if you come up with a solution using Paste we'd like to see that as well.

[jaymehta-twilio]

Thanks @richbachman. I think this shouldn't be complicated. Will update once we have an acceptable solution.

[jaymehta-twilio]

Hey @richbachman, following up on this thread. We've implemented a Back to top button here. Please scroll a little for it to appear. It works great. The only question I had was that since it's a fixed positioned button, the accessibility could be an issue. Meaning, the button may come last in natural tab flow. I was wondering if there're any concerns/inputs for those.

[gloriliale]

Hey @jaymehta-twilio, nice! This is awesome. About the accessibility of the button: it depends on if this is a static list, or if things are added to the list as you scroll, like an infinite list. Having it at the bottom of a static list, where everything is present when you render, would be fine. It'll be trickier if that's not the case.

[jaymehta-twilio]

Got it, thanks. Yes it's a static list and won't grow on scroll. So, what I understand from above comment is that it's fine if the scroll button comes last in the tab order after all the components from the static list. Please correct me if I'm wrong. Thank you again :).

[gloriliale]

That's right!