Controlling the visibility of page scroll widgets

0
I want to create a button that scrolls to the top of the page. And I want to control the visibility of the button so that it appears after the user scrolls the page a bit. I tried using the DojoXScroll widget, but I can't control "visibility" with the properties. Is there any other way?
asked
2 answers
1

Hi Mao Takeda, You can use javascript to do this .

 

step 1: Download this widget from market place Mendix Marketplace - HTML/ JavaScript Snippet

step 2: Place this widget in your top of the page .

step 3 : Paste the below code in the above widget's javascript section.

let scrollToTopBtn = document.getElementsByClassName("scrollToTopBtn")[0];

        // Show the button when the user scrolls down 20px from the top of the document
        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                scrollToTopBtn.style.display = "block";
            } else {
                scrollToTopBtn.style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function scrollToTop() {
            window.scrollTo({top: 0, behavior: 'smooth'});
        }

step 4: Give this className (scrollToTopBtn) to your button.

 

Hope this will help you.

Please accept answer if this will help you.

Thanks

answered
-1

Hi Mao Takeda,

Dojo is not recommended to use at this time as it is getting or already got deprecated, there is another solution you can go with to solve your problem if you want to create a widget while using React JS. 

you can follow this documentation as it take you step by step Build Pluggable Web Widgets  and this resource to help along the way too Pluggable Widget Property Types. Happy Hacking

answered