Back to Top Button

You can find the option to turn on the back to top button in Customize > Layout > Footer.

This option adds a button to the bottom of your website once you start scrolling that helps your visitor scroll back to the top of the page.

Moving the button

By default, the button appears at the bottom right of your page. We can move it around using some CSS:

.generate-back-to-top,
.generate-back-to-top:visited {
    bottom: 30px; /* 30px from the bottom of your screen */
    left: 30px; /* 30px from the left of your screen */
}

In the above example, we replace the default right: 30px; with left: 30px;.

Learn how to add CSS here.

Changing the color

If you have GP Premium, you can change the color in the Customizer by going to Customize > Colors > Footer.

Otherwise, we can change the background color and other styles using some CSS:

.generate-back-to-top,
.generate-back-to-top:visited {
    background-color: rgba( 0, 0, 0, 0.4 ); /* rgba or hex */
    color: #FFFFFF;
}

/* the button when you hover/click it */

.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background-color: rgba( 0, 0, 0, 0.6 ); /* rgba or hex */
    color: #FFFFFF;
}

Learn how to add CSS here.

Other styles

Many other styles can be added to the button using CSS:

.generate-back-to-top,
.generate-back-to-top:visited {
    border-radius: 3px; /* how round the button is */
    line-height: 40px; /* how tall it is */
    width: 40px; /* how wide it is */
}

Learn how to add CSS here.

Change how fast it scrolls you to the top

We can change how long it takes to scroll back to the top of the page with a simple filter:

add_filter( 'generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed' );
function tu_back_to_top_scroll_speed() {
    return 400; // milliseconds
}

Learn how to add PHP here.

Change how far from the top it appears

By default, it will show up once you hit 300px from the top of the page. We can adjust this with a filter:

add_filter( 'generate_back_to_top_start_scroll', 'tu_back_to_top_start_scroll' );
function tu_back_to_top_start_scroll() {
    return 300; // 300px from the top
}

Learn how to add PHP here.