Search code examples
jsfscrollprimefaces

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


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


Solution

  • 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: