Automatic Scroll Up Button.... New-UDScrollUp

Universal Dashboard Universal Dashboard Show Off
1

So another component I came across which we do not currently have in UD was this:-
https://react-scroll-up-button.com/
So I built it with the default scroll button as I liked that the best, and have now published this on the powershell gallery which will in-turn put this on the UD marketplace. Here is my demo on UD:-

scroll
scroll410Ă—561 2.21 MB

I hope you find this a useful component to add to your dashboard.
Module is here:-

This is super simple to implement you just need to include New-UDScrollUp inside the top of the content for your dashboard…job done.

$dashboard = New-UDDashboard -Title "New Component" -Theme $theme -Content {
    New-UDScrollUp
    New-UDRow -Columns {
        New-UDColumn -size 10 -Content {
4 Likes
2

Fancy!

Might want to include the module name? :slight_smile:

1 Like
3

I second this. If you created it, please do share the name of the module. Or were you just suggesting a naming convention?

4

UniversalDashboard.UDScrollUp

1 Like
5

Would be great to be able to move the position of the Scroll Up as it overlaps with the FAB

image

6

Apologies normally I do put these in the post when I post, guess I got a bit too excited this time:-


This is now my 30th powershell UD module just search for psdevuk on the powershell gallery to see all my other inventions

7

thank you for posting the module link I totally forgot…doh!

8

I think I used a fab button once, but couldnt get it working right…sadly I do not see a prop for positioning this…however just having a quick butchers at the link where I got this from if you choose custom that is not placed at the bottom…I didn’t add a class name to this, but from looking at the custom scrollup looks like you could position this component using CSS

  position: fixed;
  right: -100px;
  bottom: 150px;
  transition: right 0.5s;
  cursor: pointer;

Just to confirm you can adjust the bottom-height and colour and other things like positioning all via CSS on this object I just tested now. :smiley:

2 Likes
9

I have a similar implementation using just this - however it’s much less smooth:

New-UDFab -Icon chevron_up -IconColor lightgray -Id 'ScrolToTop-Button' -Size large -ButtonColor SlateBlue -onClick {
  Invoke-UDJavaScript -JavaScript 'window.scroll(0,0);'
}
10

hi @rbleattler

You can change the “invoke-udjavascript” to:

Select-UDElement -ToTop

for smooth scrolling.

Does basically the same as your javascript snippet, but with animation. (see the actual code here:


)
Performancewise they should be identical, however the Select-UDElement is more userfriendly for the non-javascript enthusiasts here.

Either that, or preferably utilize @psDevUK’s fancy solution.
I’ve heard rumors of a redesign of the floating action button in admin mode (haven’t actually seen it myself, i just remember reading something in a PR), which would make New-UDScrollUP pretty fancy lookin’.

1 Like
11

Thanks for that! I just implemented it, and it works beautifully!