Shopify Question posted in
The Shopify help center can be found here.

How to make a fixed "go to top" button on the page bottom, but above the (not fixed) footer? – Shopify

I have made a page (on Shopify) and I made there a fixed “go to top” arrow on the left bottom. It’s okay, but when I scroll to the page bottom the arrow is will be in front of the footer, and I want it to stay above the footer.

Here is the code that I use:

$(document).ready(function() {			
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $('.go-top').fadeIn(200);
    } else {
      $('.go-top').fadeOut(200);
    }
  });

  $('.go-top').click(function(event) {
    event.preventDefault();

    $('html, body').animate({scrollTop: 0}, 300);
  })
});
.go-top {
  position: fixed;
  bottom: 2em;
  right: 0.5em;
  text-decoration: none;
  font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="go-top"> &#x2191; </a>
Tags:

2

Answers


  1. 0

    add z-index to the css.
    something like:

    z-index: 100000

    make the number as large as needed for it to be on top.

    Login or Signup to reply.
  2. 0 
        $(document).ready(function() {		
      $(window).scroll(function() {
   //--------------------------- Lines added ------------------------//
       var footertotop = ($('.footer').position().top);
       var scrolltop = $(document).scrollTop() + window.innerHeight;
       var difference = scrolltop-footertotop;
      if (scrolltop > footertotop) {
        $('.go-top').css({'bottom' : difference});
      }else{
        $('.go-top').css({'bottom' : 10});
      };   
  //--------------------------- end ---------------------------------//
      if ($(this).scrollTop() > 200) {
          $('.go-top').fadeIn(200);
      } else {
          $('.go-top').fadeOut(200);
      }
      });
      $('.go-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 300);
      })
    });
    .container{height:2000px;position:relative}
.footer{height:200px;width:100%;position:absolute;bottom:0px;background:red}

.go-top {
  position: fixed;
  bottom: 20px;
  display:none; // <---- Dont display on page load
  right: 0.5em;
  text-decoration: none;
  font-size: 40px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
<a href="#" class="go-top"> &#x2191; </a>
<div class="footer"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search