Live demo — this example is server-driven; run the showcase locally for the interactive version.

Back to top

Use Back to top straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

back-to-top

{#include components/navigation/back-to-top /}
Back to top — PatternFly v6 
                                                                                  
 A sticky-positioned button that appears once the user has scrolled past 400px    
 and smooth-scrolls back to top on click. Alpine.js handles visibility +          
 interaction via the phaBackToTop component.                                      
                                                                                  
 Parameters:                                                                      
   id                 (optional) — DOM id on the container; omit unless something 
                                   else references it.                            
   title              (optional) — button label text (default: "Back to top").    
   alwaysVisible      (optional) — boolean; skip the scroll threshold and keep    
                                   the button visible.                            
   scrollableSelector (optional) — CSS selector for a scrollable element to spy   
                                   on instead of window scroll. The button also   
                                   scrolls THAT element back to 0 on click.       
   classes            (optional) — extra classes on the container, e.g. a         
                                   z-index helper like ws-back-to-top.            
 Model mode: pass backToTop=<...model.BackToTop> — the phaBackToTop args are generated in Java.