back-to-top button

JS File

Name this file – back-to-top.js and it goes in the active theme js folder

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

Functions File

add this code to the active theme functions.php file

/**  Enqueue button javascript script.
*/
function themeslug_add_button_script() {
  wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/back-to-top.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'themeslug_add_button_script' );
 
/**
* Add button HTML to the footer section.
*/
function themeslug_add_scroll_button() {
  echo '<a href="#" id="topbutton"></a>';
}
add_action( 'wp_footer', 'themeslug_add_scroll_button' );

Stylesheet Coding

#topbutton{position:fixed;display:none;height:40px;width:40px;line-height:40px;right:15px;bottom:15px;z-index:1;background:#000;border-radius:2px;text-decoration:none;color:#fff;text-align:center;}#topbutton:after{content:"\2191";}

Put this in the header file

<script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/back-to-top.js"></script>