Menu icon Foundation
How to add a Back to the Top image

How do you add a "Back to the Top" button in 5.2.1?  I've got a css file for it with various images, but can't figure out how to add it to a page.
            

         

buttonsadd image

How do you add a "Back to the Top" button in 5.2.1?  I've got a css file for it with various images, but can't figure out how to add it to a page.
            

         
Ercan Murat KISACA over 3 years ago

Add this to anywhere in your html document.

<div id="back-top">
  <a href="#"> BACK TO TOP </a>
</div>

Add this javascript code to the end of the page before closing body tag

 <script>
$(document).ready(function(){

  // hide #back-top first
  $("#back-top").hide();

  // fade in #back-top
  $(function () {
    $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
        $('#back-top').fadeIn();
      } else {
        $('#back-top').fadeOut();
      }
    });

    // scroll body to 0px on click
    $('#back-top .fi-arrow-up').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800);
      return false;
    });
  });

});
</script>

Then add this css to your css file.

#back-top {
  position: fixed;
  bottom:20px;
  right: 2%;
  z-index: 100; }

This is an open source code that I had received some months ago. I use in my projects when needed. I've edited my custom code for you. Let me know if there are issues. I would like to help.

George Hozendorf over 3 years ago

Thanks. That did it. Now I just need to figure out how to add an image.

Lynda Spangler over 3 years ago

@George

You can use a background image or just insert an image in the HTML code. I use Font Awesome on many of my sites and use <a href="#"><i class="fa fa-chevron-up"></i></a> for the arrow or whatever icon you wish to use.

Matthew about 3 years ago

Sorry to resurrect an old post. I have implemented this scroll to top arrow and for the most part it works wonderfully.

However, when the scroll to top element engages (so on scroll to roughly 100 or so pixels) my top-bar element happens to expand vertically as well. It basically resizes from the original 50 or so pixels to approx. 100px, any idea what is causing this?

Thanks for the help. I'd be happy to provide more info if needed.

Matthew about 3 years ago

Wow I am embarrassed to have asked that, found out the cause almost immediately after posting even though it took me like 30 minutes prior to no avail.

I had "sticky" class on my navigation.

Sorry for taking up the space.

Rafi Benkual about 3 years ago

Ok Matthew. Glad you got it!