Back to top

The following code needs some work. I will add this tutorial anyway. As it shows a method for Beans to add a back to top link. I will also add another solution below it.

As one scrolls closer to the bottom one can have a back to top navigation link show up. Click it and the page smoothly scrolls to the top. The following uses UIkit.

Add the following to the functions.php file:

add_action( 'beans_uikit_enqueue_scripts', 'enqueue_uikit_assets' );
function enqueue_uikit_assets() {
   beans_uikit_enqueue_components( array( 'scrollspy', 'smooth-scroll' ) );
}

// right footer text:
add_filter( 'beans_footer_credit_right_text_output', 'machine_footer_right_text' );
function machine_footer_right_text() {
return '<a href="#" class="mk-top-button" data-uk-smooth-scroll="{offset: 90, duration: 2000}">Back to the Top</a>';
}

// add anchor for back-to-top
add_action( 'beans_body_prepend_markup', 'totop_anchor' );
    function totop_anchor() {
    ?><div id="mk-top"></div><?php
}

Example CSS:

.mk-top-button {
  font-size: 14px
  background-color: rgba(204, 204, 204, 0.5);
  padding: 10px;
  border-radius: 9px;
  border: 1px solid #ccc;
}

Resources:
community.getbeans.io/discussion/ulkit-scrollspy/
community.getbeans.io/discussion/floating-back-to-top-and-hamburguer/
getuikit.com/v2/docs/scrollspy.html
getuikit.com/v2/docs/smooth-scroll.html

An alternative:
easywebdesigntutorials.com/back-to-top-link/

/* 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>';
}