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>'; }
No comment yet, add your voice below!