Scroll p:messages into view when it is updated and (error) messages are present

Question

I am working with PrimeFaces messages, I want my whole page to scroll to top when p:messages is rendered.

Answer 1

Deprecated with PrimeFaces < 6.2

In you backing bean (that one which produces the messages), you should know when you render a p:message. If so simply execute this:

RequestContext.getCurrentInstance().execute("window.scrollTo(0,0);");

Update:

With the newer PrimeFaces versions (>= 6.2), the approach to execute Javascript on the client side is (by using x and y coordinates):

PrimeFaces instance = PrimeFaces.current();
instance.execute("window.scrollTo(0,0);");

To scroll to an element use the element's clientId:

PrimeFaces instance = PrimeFaces.current();
instance.scrollTo("myElementsClientId");

Find more information here:

• http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to
• examples with jQuery for smooth scrolling as well: Scroll to the top of the page using JavaScript/jQuery?