A Back to top link

Having a back to top link is useful for longer pages.

I did a search and came across this code at https://wordpress.org/support/topic/adding-back-to-top-button-1?replies=14  One can just place the code into the child theme functions file and it should work just fine.

/* Back To Top */

    add_action( 'wp_footer', 'back_to_top' );
    function back_to_top() {
    echo '<a id="totop" href="#">Back to Top</a>';
    }

    add_action( 'wp_head', 'back_to_top_style' );
    function back_to_top_style() {
    echo '<style type="text/css">
    #totop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none;
    outline: none;
    }
    </style>';
    }

    add_action( 'wp_footer', 'back_to_top_script' );
    function back_to_top_script() {
    echo '<script type="text/javascript">
    jQuery(document).ready(function($){
    $(window).scroll(function () {
    if ( $(this).scrollTop() > 500 )
    $("#totop").fadeIn();
    else
    $("#totop").fadeOut();
    });

    $("#totop").click(function () {
    $("body,html").animate({ scrollTop: 0 }, 800 );
    return false;
    });
    });
    </script>';
    }

I went ahead and added some modifications.
The result is that the button looks like this.

On hover it looks like this:

The code I added to the functions file:

The black arrow is actually a Mac symbol I added through the Show Emoji & Symbols utility.
Hopefully it will also work on other computers…

/* Back To Top */

add_action( 'wp_footer', 'back_to_top' );
 function back_to_top() {
 echo '<a id="totop" href="#" data-btn-alt="Top">⬆︎</a>';
 }

add_action( 'wp_head', 'back_to_top_style' );
 function back_to_top_style() {
 echo '<style type="text/css">
 #totop {
 position: fixed;
 right: 30px;
 bottom: 30px;
 display: none;
 outline: none;
 text-decoration: none;
 font-size: 26px;
 background: rgba(42, 64, 67, 0.4);
 padding: 3px 12px 3px 12px;
 border-radius: 5px;
 box-shadow: 0 0 1px #000;
 color: #fff;
 z-index: 100;
 }
 
 #totop:hover {
 background: rgba(42, 64, 67, 1);
 }
 
 #totop:hover:after{
 content: attr(data-btn-alt);
 font-size: 16px;
 color: #fff;
 padding-left: 5px;
 }
 </style>';
 
 }

add_action( 'wp_footer', 'back_to_top_script' );
 function back_to_top_script() {
 echo '<script type="text/javascript">
 jQuery(document).ready(function($){
 $(window).scroll(function () {
 if ( $(this).scrollTop() > 1500 ) 
 $("#totop").fadeIn();
 else
 $("#totop").fadeOut();
 });

$("#totop").click(function () {
 $("body,html").animate({ scrollTop: 0 }, 800 );
 return false;
 });
 });
 </script>';
 }

To adjust when the button shows up during scroll adjust the scrollTop 1500 to another number.
To adjust the speed from clicking the button to when the page arrives at the top adjust the 800 number.
To adjust the size of the box adjust the padding (top, right, bottom, left) 3px 12px 3px 12px.
To adjust the opacity change the background: rgba(42, 64, 67, 0.4)  –   0.4 value.

Resources:
https://wordpress.org/support/topic/adding-back-to-top-button-1?replies=14
https://getflywheel.com/layout/add-sticky-back-top-button-website/
https://www.webtipblog.com/adding-scroll-top-button-website/
.https://www.codecheese.com/2013/11/create-back-to-top-button-for-wordpress/

Back to top plugins:
https://wordpress.org/plugins/scroll-back-to-top/
https://wordpress.org/plugins/scroll-to-top-button/