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 4 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 4 years ago

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

Lynda Spangler over 4 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 over 4 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 over 4 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 over 4 years ago

Ok Matthew. Glad you got it!

Taylor Shaw 9 months ago

The answers shared here gave me a better idea regarding How to add a Back to the Top image. I have been wondering about the same for quite a while now. Thanks for sharing the question here. Do share more such relevant questions. private tour guide washington dc

JaredMohr 5 months ago

I have followed this website to get answers for many questions. As per the bestwritingservice, there are many changes are happened in programming. I am really curious to know updates on technical news.