
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(); } } }