Back To Top

This module allows users to smoothly scroll back to the top of the page.

The link fades in on the bottom right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users continues scrolling, the button nicely reduces its opacity to be less distracting during navigation.

    FAQ

    Note: The ideal place to add custom CSS in Oxygen is at Manage > Stylesheets in a new/existing Stylesheet.

    How to change the background color of the circle?

    Here is an example of customizing the color of the back to top button in regular and hover states:

    /* change the background color of the icon - regular state */
.cd-top {
	background-color: #333;
}

/* change the background color of the icon - hover state */
.js .cd-top:hover {
	background-color: #000;
}

    How to change the shape of the button?

    To change the back to top button shape from circular to a square, add this CSS:

    .cd-top {
	border-radius: 0;
}

    How to change the up arrow icon with another image?

    The background image comes from the following line of the plugin for .cd-top:

    background: url(../img/cd-top-arrow.svg) no-repeat center 50%;

    Here is sample CSS code to replace the image:

    .cd-top {
	background-image: url(/wp-content/uploads/2020/05/up-arrow.png);
}

    Replace /wp-content/uploads/2020/05/up-arrow.png in the above with the URL of your up icon image uploaded to your site’s media library.

    How to push the button above on mobiles

    By default the back to top button will be positioned 20px from the bottom. If you would to push it further up at smaller viewports add this sample CSS and modify as needed:

    @media only screen and (max-width: 1023px) {
	.cd-top {
		bottom: 40px;
	}
}

    How to load the Back To Top button conditionally?

    Here is an example of loading it only on all single posts.

    Add this in a Code Snippet:

    add_action( 'wp_enqueue_scripts', 'ot_load_back_to_top_conditionally', 100 );
/**
 * Remove Back to Top button from loading everywhere except on single posts.
 */
function ot_load_back_to_top_conditionally() {
	// if we are on a single post, abort.
	if ( is_singular( 'post' ) ) {
		return;
	}

	// remove Back to Top button.
	remove_action( 'wp_head', 'Oxy_Toolbox_BackToTop::add_js_to_html' );
	remove_action( 'wp_footer', 'Oxy_Toolbox_BackToTop::back_to_top_html' );

	wp_dequeue_style( 'oxy_toolbox_back_to_top_style' );
	wp_dequeue_script( 'oxy_toolbox_back_to_top_script' );
}

    How to hide the Back to Top button on mobiles?

    Add the following sample CSS:

    @media only screen and (max-width: 479px) {
	.cd-top {
		display: none;
	}
}

    How to change the size of the Back to Top button?

    Add the following sample CSS to make the button smaller in size:

    body .cd-top {
  width: 30px;
  height: 30px;
  background-size: 35%;
}
    Top