How to scroll down to a specific container on button click?

1
We have already tried below and it did  not work: 1)Using Html Snippet widget  we added js code to apply the scroll to bottom like  window.scrollTo(0,document.body.scrollHeight);  but it seems it does not work. In fact, any function from window is not working.   2)Using Nanoflow which contain javascript action. This approach did not work as well. It appears that we are unable to call  any window function.    
asked
3 answers
2

You can use the Scroll To action in the Web Actions module.

https://docs.mendix.com/appstore/modules/web-actions

Hope this helps.

answered
0

You could create a custom css class, and include it in the appearance section of your container under Common-Class.

(CSS code regarding scrolling):

overflow-y: scroll;

max-height: 100vh;

 

Using the overflow (Defined above), you can define if you want to scroll through your container if the content inside is to long.

https://www.w3schools.com/css/css_overflow.asp

https://docs.mendix.com/howto/front-end/customize-styling-new

 

 

answered
0

@Monika, we used a JavaScript action call in a nanoflow to do the same. You can check it out in various ways on this site in the “Basics” section.

The idea is to use the classic JavaScript to find the element you want to scroll into view, then use the proper action. Here is the code to find an h1, the innerText of which matches the input parameter:

export async function JsA_ScrollToH1Title(h1_Title) {
	// BEGIN USER CODE
		
    //get list of all h1s on the page.
    var h1_list = document.querySelectorAll('h1');

    //convert to array so we can use .click() or .scrollIntoView() later...
    let arrayList = Array.from(h1_list);

    //find the right element; in this case the h1 that has an innertext that matches our input variable
    let index = arrayList.findIndex(e => e.innerText == h1_Title);

    //if found, we target this specific element, and call the function we need.
    if (index > -1){
        arrayList[index].scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
    }

	// END USER CODE
}

Mind you, I would add an error handler on this to prevent unnecessary errors, e.g. when the input parameter has not been set ;-) 

Hope this helps. 

Best regards,

Wouter

answered