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: https://reesandcompany.co.uk/dev/Proud_Space_nerds/
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
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.
Cheers
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.
Hi Roger, @rojharris I have done that with UIKit stacks only. I’ll upload how/example later today when I’m at my computer.
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.
https://axyn.com/samples/scroll-to-top.rw8.zip
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?
Cheers
Roger
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
Thanks, glad to hear that it will work for you!😀
Ricardo
Added a sticky menu to the scroll up example file. Just re-download the same link:
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 .
Cheers,
Roger
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.
Cheers
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.
Cheers,
Ricardo