How to Scroll a page or navigates from top to bottom in UI using OnClick functionality.
Suppose you have a Home icon & Contact Us button on the Header of the Page and Contact details are at the bottom of the page. If you want to go to the footer of the page which is having contact details on click of Contact Us button on the Top of the Page.
Follow these Steps:
1. Create an TextInput in Skin with no border, no background color, width & height as 0px or 1px, font color as none or transparent etc. So that the TextInput we have mentioned in the section cannot be visible in the UI.
2. Place this TextInput at the footer where we have the Contact Us details & map the TextInput to pyNote.
3. On Contact Us button, go to Actions Tab,
Create an Action Set,
Add an event: Click
Add an action: Set focus
Mention Target as .pyNote
Run the application and click on Contact Us button, It navigates to footer where we have contact details.
***Edited by Moderator Marissa to update platform capability tags****
Truviq
IN
Hi Vamsi,
This post so useful. Thank you for posting the new idea.
I am facing some problem, can you please help.
i have followed the same steps to use in one of our application. But when i click on the button the focus is moving to the pyNote thats is at the end of the page, but the page remains on the top and no scroll is happening.
Aaseya IT Services Pvt Ltd
GB
Hi Soumya,
Are you using any screen layout?
I just want to know, where you are triggering the action? If you provide me with the screens and steps. I will definitely try to resolve or else I can suggest another way to do this.
Aaseya IT Services Pvt Ltd
GB
Hi Soumya,
This might be helpful to you.
Pegasystems Inc.
IN
Hi,
For scrolling to the end of the document we can use the below code under run script on click of the required button/icon:
window.scrollTo(0,document.body.scrollHeight);
Aaseya IT Services Pvt Ltd
GB
For Scrolling to any section in the UI using on click, go through the below link.