Back-to-Top button showing up on scroll down, hiding when back to top

Hello

I’d like my Back-to-Top button to show up only when the content in the dynamic panel Wrapper in scrolled down, and to hide once the content in the dynamic panel Wrapper is back to top.

Untitled Document

Thanks for your help.
back_to_top_button.rp (3.55 MB)

  1. you want back to top to be hidden initially
  2. you want to add your case to the dynamic panels on scroll event ([[this.scrolly]] instead [[window.scrolly]])
  3. the scrolly grows on scrolling, in your condition you want to use is greater 10 instead is less 10.

Sorry, I didn’t get it… thanks though. :slight_smile:

If you have a rp file as an example, or maybe a step by step tutorial, it’d be great. :thumbup:

You attached the functionality to show and to hide to the onPageScroll-Event. The onPageScroll Event will not be fired because the page does not scroll. The contents of the dynamic panel “Wrapper” does. As well as the page dynamic panels know onScoll. Select the dynamic panel wrapper, click more events in the Widgets interactions panel, select onScroll. add a case. The correct condition is: if [[this.scrollY]] is greater than value 10. The action is as you already did: show “back to top”. Duplicate the case (select case copy case, paste case). Open the new case, clear condition, change hide “back to top” to show “back to top”. The second case is automatically defined as “else if”. Now select your widget “back to top” and check the hidden checkbox (it appears twice, in the Widget Properties Panel and in the Properties Panel at the top of the Axure window).
back_to_top_button.rp (3.55 MB)

I’m trying to build out the same thing in an adaptive view. Is it possible to do this same thing but have it lock to the bottom right of the DOM?

I have a large repeater list that I want to have a “scroll to top” icon appear as they move through the list.

Thanks

Hmm, to clarify, you want to be able to scroll through the repeater and have the scroll-to-top button appear as the user scrolls down, and the button appears at the bottom right of the repeater?

If the repeater is going to be scrollable on its own separate from the rest of the page content, then you could put it into a dynamic panel, make the panel’s height shorter than the repeater, and add a vertical scrollbar. Your scroll-to-top button could be hidden and placed on the canvas at the bottom-right-edge of the repeater, and can be shown with the dynamic panel’s OnScroll event (similar to Gregor’s post). The position of the hidden button can be adjusted on the canvas as you edit your adaptive views, if the repeater will look different in each adaptive view.

Does this do the trick? Scroll to Top Repeater.rp (62.9 KB)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.