Could you share an .oml (export file) of an example of you using this, and what you're trying to achieve? Will help us help you

Debugging javascript in OutSystems can be tricky but you might want to try to debug this function on its own on a very simple html page with other web developer tools

I guess I wont be able to share an oml with you because I am doing it in my live project.

Now I am trying below JS putting in onready event but still it is not working.

I have feeling like I am doing wrong in putting this code at right place .

let myFooter = document.getElementById("footer");// When the user scrolls down 20px from the top of the document, show the buttonwindow.onscroll = function() {scrollFunction()};function scrollFunction() {  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {    myFooter.style.display = "block";  } else {    myFooter.style.display = "none";  }}// When the user clicks on the button, scroll to the top of the documentfunction topFunction() {  document.body.scrollTop = 0;  document.documentElement.scrollTop = 0;}

 Thanks,

Nidhi

Hi @Nidhi Sardeshpande 

I'm not sure if this is what you're trying to achieve, but here's a quick solution.

On your Layout's OnReady action, added this script:

On your Application Theme:

Note:

The scrolling of the application don't happen on the Window nor the body, but on screen-container element

There are multiple ways to get the element:

1. Using class selector - document.getElementByClassName('screen-container')[0];

or the preferred way 

2. Using JavascriptAPI (preferred) - $public.View.getCurrentScreenRootElement();

I've attached the oml with the solution. Please let me know if this solves your issue or if you have any questions.

Regards,

Kharlo

Hi @Kharlo 

Thanks for your solution.

I have done it below way.

I have added css class to one conatiner 

.stickyfooter{position: sticky;bottom: 0;height: auto;display: none;}

and then on ready of that page I have added JS code as belowtaking appropriate class names:

document.getElementsByClassName("screen-container")[0].addEventListener('scroll', function() {var myFooter = document.getElementsByClassName("stickyfooter")[0];if (document.getElementsByClassName("screen-container")[0].scrollTop > 20 || document.getElementsByClassName("screen-container")[0].scrollTop > 20) {    myFooter.style.display = "block";  } else {    myFooter.style.display = "none";  }});

and it worked.

Thanks,

Nidhi