How to re-create a jump to top button?

Hi Chaps,

I’m trying to re-create a jump to top button that pops up on the page after a certain amount of scrolling, just like this foundry one I made:
scroll down and you’ll see it pop up bottom right.
I’m thinking some kind of Scrollspy and a tiny modal?? I know how to scroll to the top (#) no probs, I just need to implement a ‘pop-up-after-one-viewport-depth’ button…

Perhaps you’ve already done something like this @steveb ?

Thanks guys

Joe Workman’s elevator stack can do this, I think it is for free (notsure)
You can add your own sprite png and you can set when it appears = reveal ( in pixels from the top), even the scroll speed is adjustable

Perfect! Thanks @Capetom

I haven’t looked at doing that with the native UIkit stacks yet. I have implemented a scroll to top button on a few sites, but the up arrow is always visible.

Explain what the purpose of the popup is, as in, what content do you want in it, and I’ll have a think about a solution.

Hi Steve. It’s literally a scroll to top that only appears after you’ve scrolled down a page. However I think Capetom has found a solution for me with ‘Elevator’.

I was just interested to see if UIKit could be made to open a modal (the button) only after scrolling down a certain amount.


Gotcha. I made a sticky bottom scroll to top button for UIkit (uses a regular botton in scrolltop mode with some custom css to stick it to the bottom in the correct place) but it’s present on the page all the time. I’m not a fan of the ones that popup. So yes, a third party solution would be best if that’s what you want as I don’t think that functionality exists in the native stacks.

1 Like

Hi Roger, @rojharris I have done that with UIKit stacks only. I’ll upload how/example later today when I’m at my computer.

1 Like

Hi Ricardo, @Ricardo. I’d be interested to see your solution. I think I’ve worked out how to do it also but haven’t had time to try my idea so help and inspiration always welcome. thanks

Hi Roger @rojharris,

Here is the link to the way I implemented a scroll to top button. It only shows up after scrolling down some, and it disappears when you are back to the top.

I hope that it is useful to you and everyone else.

Hi Ricardo @Ricardo ,

For me that button is always there, even if I add a long content area so its further down the page, it is always visible, even if I make my browser window very shallow. I’m not getting any fade out/back in on scroll behaviour?


Sorry Roger @rojharris,

I uploaded the wrong example, you need a section for it to work. Just re-download the example file, I have the correct one now uploaded.

No worries Rodrigo @Ricardo That one worked perfectly… Very clever idea to have a position within a sticky.!


Thanks, glad to hear that it will work for you!😀


1 Like

Added a sticky menu to the scroll up example file. Just re-download the same link:

1 Like

Hi Rodrigo @Ricardo,

Can you explain just HOW your scroll-to-top is working? I’ve been wracking my brains trying to see the logic behind it but I cannot… For example why does it need a section? … and how did you know to try this? I can’t find any documentation on the sticky that would lead me to adding a section to make it work…

It’s a super clever little thing but its driving me nuts trying to figure it out .


Use a button which you can position to the right, centre etc. It doesn’t need to be in a section, I’ve just tested it. You could put the button in another stack to help with positioning etc.

In the button you can select “Integration>Totop”. You can also delete the button text so that just the arrow up icon appears.

Thanks @Neil but I’ve got this working fine, I just wondered how Rodrigo achieved it, not the positioning, but the fact that the fade only works if there’s a ‘section’ stack on the page.


Sorry, didn’t read the previous comments fully.

No Probs… Every little helps as Tesco says… Until you mentioned it I hadn’t realised that the button had a ‘Totop’ integration, so you helped me learn something new so thanks for that… :-)

Hi Roger,

Not sure how “Rodrigo” got this to work, but I can tell you how I did it, lol 😉

Actually the button is always there, but it’s z-index is lower than the section before it sticks. In which case the section color is covering it. If you make the section transparent, the button always shows.

I don’t use the ‘To-Top’ integration, as it’s not needed and you are stuck with the same chevron icon all the time. Without integrating ‘To-Top’ it gives you more flexibility.