AXURE - Program a Back to Top of Page Button

Hello

Wondering how I can set-up a Back to Top of page button (icon)…the kind of button that is not visible at opening page, but as you scroll down the icon fades in (or) just appears - then you can tap it to get back to the top.

Any document I can review with this on as art would be great!

Best: Daryl

If I have understood this, I think it is fairly straightforward.

Place a dynamic widget on the screen (your go to top button)
In properties set the widget to Pin to Browser at foot of screen (or wherever you want it to appear)
Set an OnClick action for the button to scroll to the top of the main content widget
Hide the button

At the page level, on the page inspector

  • OnWindowScrollDown set the button to show and fade in
  • Set it to Wait for a few seconds and then set it to hide and fade out (optional)

top-of-screen.rp (56.6 KB)

Dear Dave
Thanks…just a quick 2 points if you can.

  1. When I first set the On Click (I need to select the ‘Scroll to Widget’ from the list in Left side menu - right?).
  2. And last of all: Where is the OnWindowScrollDown - as I am trying to see where the page level is in the page inspector (sorry). just a tip about me to look here and there for that to happen please.

Thank you for your help, as it is much appreciated: Daryl

…think I might have got that OnWindowScrollDown…I went to the OUTLINE PAGE and where the ( State 1 ) is located, I touched on SHAPE icon…and saw the programming for this here…so Dave: this is where I would sort this part out to show/hide.

thanks: Daryl

  1. Correct. (As an afterthought, You could place a widget at the top of the screen and set its opacity to 0% and use that as your ‘anchor’ if you want)
  2. If you click on the background of the window (the ‘artboard’ equivalent to use Adobe CC’s terminology) then the inspector will be relevant to actions of the page such as scrolling and so on. If you have a widget selected, the inspector will be relevant to the actions on that widget

I hope that makes sense

If you download the example I attached to my original post you should see it all in there

You can use on show for the icon at the bottom of the page on Page scroll. And when you click the icon you move the page back up. but this time you just need to add Hot Spot at the top of the page.

This will move the page to the Hot Spot position when you use OnClick

Dear Dave/James
I have done the invisible anchor spot before and works fine - just thought I’d get a heads up about any other way. You guys have been very helpful and a credit to this forum.

Best wishes: Daryl

Dear Davey

Putting placing the artwork of that 'Back To Top of Page ButtonNET-A-PORTER.rp (3.0 MB)
you kindly were helping me with the other week…but am stuck - as I can’t get it moving (or) showing. Might have something to do with this section (see image)…as I don’t know how to set this up. Could you possibly see what I have done and where I screwed up in my understanding please.
I have the hidden button over the flashdance girl (right side)

Its a complex little thing - I have set-up a dynamic panel and programmed the state - but think you are activating it when it nears an item on the page…maybe you could clarify and I can see what you did. I could not locate OnWindowScrollDown set-up anywhere.

Happy Easter too! Daryl

1 Like

Hey Daryl

Sorry I didn’t get onto this sooner - I’ve been away for a couple of days.

I think I understand where you are getting confused. When you click on a widget in Axure, you can use the properties panel to set actions on the widget (onClick etc.) However, when you click away from any widgets (onto the background) you can then use the properties panel to set actions to things that happen to the screen (onWindowScroll etc.)

With your ‘button’ widget, you have set it up perfectly, all you need to do is click off the widget and then set the actions for when the window scrolls, - basically make it visible when it scrolls one way and hide it when it scrolls the other way …or whatever.

I have put a couple of these actions on your prototype, and uploaded it here. Hopefully it will make sense to you. Let me know if I can help further.

Cheers, Dave

NET-A-PORTE-v02.rp (3.0 MB)

Thank you Dave…just need a guide sometimes, and you have been very helpful.

Sincerely: Daryl

Hi Davey

Sorry to bother you again…I had my button you helped me with - (all in place for days now and happy with it)…and for some reason - it is out of place now, and I have not changed anything. I did make the button respond to a hot spot at the top of page some days ago - and that worked well to get the thing right to the very top of the page…

Could you snoop at my file and see why it’s prototyping away from its position please. I would really appreciated it! Its sitting over content now and just wrong.

Thank you and hope you can add to my learning on this. I just need to lock the position in on the screen (is that possible- so it will be in same location, when moving down.

Best wishes: DarylNET-A-PORTER.rp (3.9 MB)

Hi Daryl

Looking at your file, on the ‘button’ dynamic panel the pin to browser is set to left. This has 940px of margin ( when it is set to left the amount of margin is always determined by where you place the widget on the page and you cannot alter it - other than by moving the widget). As it is, this means that the button widget will always appear 940px from the left.

Because your screen is set to centre the content, when the browser is e.g. 1300px wide, the content will be in the middle except for your button, which will always be pinned 940px from the left.

What you need to do is set the Pin to Browser, Horizontal Pin setting to Right and then set the margin to e.g. 20px

Then you will find that it always sticks to the bottom right of the screen no matter how wide the browser is when the page is being viewed.

Hope this helps. Good luck,

Dave

Thanks Davey - and for taking the time with this.

Sincerely: Daryl

It’s also possible to use an area where the button should appear instead of using the Wait event.

  1. Create an area from where the button should start to show.
  2. Create a dynamic panel, create a button inside the panel and hide it. The dynamic panel should still be visible.
  3. Set up like this on Page properties


    The button appears when it passes over the gray area when you scroll. With this you can control exactly when the button should appear.