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 almost 5 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 almost 5 years ago

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

Lynda Spangler almost 5 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!

JaredMohr 10 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.