Hi,
I want to give a link in the bottom of the screen to scroll to top in Reactive Web App. I tried with the onclick-> RedirecttoURL and passing "#" in URL parameter but it refreshes the page where all local variables are destroyed. Can anyone please help me here with any other approach.
Hello Kaustubh Kamble,
You can use the scroll to element and pass the widgetid of the topmost container
for reference pls refer the below thread
https://www.outsystems.com/forums/discussion/57553/scroll-to-specific-element-top-of-page/
Hope this helps!
Regards,
Ellakkiya.S
Thanks for the quick reply but in this we have to pass the widget id. I don't want to pass any parameter. I am using the below script in traditional web app and it is working as expected. I want to go for the similar approach but this script is not working in reactive web app.
"<script> $('html, body').animate({ scrollTop: 0 }, 'slow'); </script>"
hello kaustubh,
drag javascript in the action and call when you want
Add this code in that
window.scrollTo(x-coordinate, y-coordinate)
This is the format we need to give x and y coordinate respectively
For top scroll give below :-
window.scrollTo(0,0)
May be this will helps you ,
Thanks and Regards,
Akshay Deshpande
Hi Akshay,
The above approach I tried but it is not working. I have added button at the end of the page and that is calling the ButtonOnClick action to execute this Javascript action.
Got the solution, I added below CSS in the main module to get the JS working.
html { overflow-y:scroll; } .screen-container { overflow-y: initial; overflow-x:unset; }
I agree with the approach from Akshay, avoid using jquery.
Check this component and see how it's done
https://www.outsystems.com/forge/component-overview/10024/reactive-scroll-to-top
Kind Regards,
Márcio
Hi This is the most simple answer :)