Back to Top Button

Function file require

<?php
require get_template_directory() . '/components/back-to-top/back-to-top.php';

The Component

<?php 
function gomo_back_to_top_script() {
	$theme_version = wp_get_theme()->get( 'Version' );
	wp_enqueue_script( 'gomo-back-to-top-js', get_template_directory_uri() . '/components/back-to-top/back-to-top.js', array(), $theme_version, false );
	wp_script_add_data( 'gomo-back-to-top-js', 'async', true );
}
add_action( 'wp_enqueue_scripts', 'gomo_back_to_top_script' );
function gomo_back_to_top () {
	?>
		<div id="back-to-top">
			<a href="#page">
				<i class="far fa-angle-up" aria-hidden="true"></i>
			</a>
		</div><!-- #back-to-top -->
	<?php
}
add_action( 'wp_footer', 'gomo_back_to_top' );
?>

The Jquery

(function($) {
	"use strict";
	$(document).ready(function() {

	// back to top
	$("#back-to-top").hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			$('#back-to-top').fadeIn();
		} else {
			$('#back-to-top').fadeOut();
		}
	});


})(jQuery);

Required SCSS in the theme template footer.scss

#back-to-top {
	position: fixed;
	right: rem-calc(20);
	bottom: rem-calc(20);
	z-index: 999;
	a {
		display: block;
		i {
			@include mixin-icon-box-back-to-top();
		}
	}
}