Back to top button

Hello,

I've been reading a couple of threads that mention a back to top button but cannot get it to work as intented. Here is what i am trying to do:

I need a sticky button in the bottom right corner of the screen. The button should appear after a predefined amount of scroll and disapear when at the top of the page.

I already have the sticky and scrollspy component activated.

kind regards,

This is not a Beans question. There are plenty of how to's on back to top buttons.

Start here

Hi Alex,

Here is a snippet that does what you are after:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
 * Enqueue UIkit assets.
 */
function example_enqueue_uikit_assets() {
  beans_uikit_enqueue_components( array( 'smooth-scroll', 'scrollspy' ) );
  beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );
}

add_action( 'beans_header_before_markup', 'example_scroll_top' );
/**
 * Example scroll up button.
 */
function example_scroll_top() {
  ?>
  <div data-uk-sticky="{top: -200, animation: 'uk-animation-fade'}">
    <a href="#" class="uk-button" data-uk-smooth-scroll style="position: fixed; bottom: 10px; right: 10px;"><i class="uk-icon-arrow-up"></i></a>
  </div>
  <?php
}

Note that I added a bit of inline styling for the sake of the example but you may move it to your CSS/LESS file 😉

Happy coding,