Make a Back to Top button in WordPress

backtotop-button-in-wp.md

@link https://premium.wpmudev.org/blog/back-to-top-button-wordpress/

footer.php

<a href="#" class="topbutton">
    <span class="screen-reader-text"><?php _e( 'Back to Top', 'theme_slug' ); ?></span>
    <?php echo theme_slug_get_svg( array( 'icon' => 'material-arrow-upward' ) ); ?><!-- SVG functions found in TwentySeventeen theme -->
</a>

functions.php

<?php
function enqueue_my_scripts() {
	wp_enqueue_script(
		'custom-script',
		get_stylesheet_directory_uri() . '/js/topbutton.js',
		array( 'jquery' )
	);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

style.scss

.topbutton {
  
    font-family: "FontAwesome";
    content: '\f077'; // fa-chevron-up
    color: $color__white;
    background-color: darken( $color__bright_blue, 10% );
    height: 30px;
    width: 40px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    display: none;
  
    .icon {
      
        display: block;
        margin: 0 auto;
        top: 2px;
      
    }
  
    &:before {
      
        content: "";
        display: block;
        position: absolute;
        top: -5px;
        -webkit-transform: skewY(14deg);
        transform: skewY(14deg);
        width: 100%;
        height: 100%;
        background-color: darken( $color__bright_blue, 10% );
      
    }
  
}

topbutton.js

/**
 * @link https://premium.wpmudev.org/blog/back-to-top-button-wordpress/
 */

jQuery( document ).ready( function( $ ) {
    	var offset = 100;
    	var speed = 250;
    	var duration = 500;
	$( window ).scroll( function(){
    		if ( $( this ).scrollTop() < offset ) {
			$( '.topbutton' ) .fadeOut( duration );
            	} else {
	     		$( '.topbutton' ) .fadeIn( duration );
            	}
        });
	$( '.topbutton' ).on( 'click', function() {
		$( 'html, body' ).animate( { scrollTop:0 }, speed );
		return false;
	});
});