Design System is here - Read the release post

Learn GeneratePress

Developers

Scroll and back to top filters

Filters for the back-to-top button and, with GP Premium’s General module, smooth scroll.

Jump to

Back to top

generate_back_to_top_icon

GP Free

The generate_back_to_top_icon filter allows you to change the icon in the back to top button.

Parameters: $value (string). Default: fa-angle-up.

add_filter( 'generate_back_to_top_icon', function( $value ) {
    return $value;
} );

Guide: General & Performance

generate_back_to_top_output

GP Free

The generate_back_to_top_output filter allows you to change the HTML markup of the back to top button.

Parameters: $value. Default: shown right, computed at render time:

sprintf(
				'<a title="%1$s" aria-label="%1$s" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="%2$s" data-start-scroll="%3$s" role="button">
					%5$s
				</a>',
				esc_attr__( 'Scroll back to top', 'generatepress' ),
				absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
				absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
				esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
				generate_get_svg_icon( 'arrow-up' )
			)
add_filter( 'generate_back_to_top_output', function( $value ) {
    return $value;
} );

Guide: General & Performance

generate_back_to_top_scroll_speed

GP Free

The generate_back_to_top_scroll_speed filter allows you to change how fast your taken back to the top of the screen.

Parameters: $value (integer). Default: 400.

add_filter( 'generate_back_to_top_scroll_speed', function( $value ) {
    return $value;
} );

Guide: General & Performance

generate_back_to_top_start_scroll

GP Free

The generate_back_to_top_start_scroll filter allows you to choose how far from the top of the screen the button appears.

Parameters: $value (integer). Default: 300.

add_filter( 'generate_back_to_top_start_scroll', function( $value ) {
    return $value;
} );

Guide: General & Performance

Back to top

Smooth scroll (GP Premium)

generate_smooth_scroll_duration

GP Premium — General module.

The generate_smooth_scroll_duration filter allows you to modify the duration of our built in smooth-scroll.

Parameters: $value. Default: 800.

add_filter( 'generate_smooth_scroll_duration', function( $value ) {
    return $value;
} );

Guide: General & Performance

generate_smooth_scroll_elements

GP Premium — General module.

The generate_smooth_scroll_elements allow you to initiate smooth scroll on other element classes instead of just ones with the smooth-scroll class.

Parameters: $value. Default: shown right, computed at render time:

array(
					'.smooth-scroll',
					'li.smooth-scroll a',
				)
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
    $elements[] = 'a:not([data-gpmodal-trigger="gp-search"])[href*="#"]';
    
    return $elements;
} );

Guide: General & Performance

Back to top