5

I'm trying to implement a "go to top" button that floats at the bottom right corner of a page. I can do this with the following code, but I don't want this button to enter the footer of my page. How can I stop it from entering the footer and stay at the top of it when user scrolls the page down to the bottom of the page?

CSS

#to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #333;
  text-align: center;
  cursor: pointer;
  display: none;
}

JavaScript

$(window).scroll(function() {
  if($(this).scrollTop() != 0) {
    $('#to-top').fadeIn(); 
  } else {
    $('#to-top').fadeOut();
  }
});

$('#to-top').click(function() {
  $('body,html').animate({scrollTop:0},"fast");
});

HTML

<div id="to-top">Back to Top</div>

EDIT Here is a drawing of how it should look like. The black vertical rectangle is a scroll bar. The "back to top" button should never enter the footer region. enter image description here

Here is a jsfiddle.

TomDev
  • 3
  • 3
CookieEater
  • 2,237
  • 3
  • 29
  • 54

3 Answers3

2

The solution turned out to be more complicated than I thought. Here is my solution.

It uses this function to check if footer is visible on the screen. If it is, it positions the button with position: absolute within a div. Otherwise, it uses position: fixed.

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

$(window).scroll(function() {
    if($(this).scrollTop() == 0) {
        $('#to-top').fadeOut();
    } else if (isVisible($('footer'))) {
        $('#to-top').css('position','absolute');
    } else {
        $('#to-top').css('position','fixed');
        $('#to-top').fadeIn();
    }
});

jsfiddle

Community
  • 1
  • 1
CookieEater
  • 2,237
  • 3
  • 29
  • 54
1

Increase the value of bottom: 10px; than the height of footer. I saw your screenshot now,just add some padding-bottom to it.

majorhavoc
  • 2,385
  • 1
  • 24
  • 26
  • ...or `absolute` position it within your content element, provided that has relative positioning already. – Strelok Aug 27 '13 at 01:42
  • Hi @Sharath, I am a little bit confused. Where do I add `padding-bottom` and what would be its value? – CookieEater Aug 27 '13 at 01:47
  • Add it to the "back to top" button – majorhavoc Aug 27 '13 at 02:24
  • This still does not solve the problem. As I said in the comment below, if I increase the value of `bottom`, it would not stick at the right bottom corner of the page when footer is not visible on the screen. Also, changing the value of `padding-bottom` did not change anything. Am I missing something here? – CookieEater Aug 27 '13 at 02:29
  • @CookieMonster The problem is that `position: fixed;` takes it out of the flow. It then doesn't know where the other elements are. – James Khoury Aug 27 '13 at 02:33
  • Does that mean the only solution would be to position it with JavaScript? – CookieEater Aug 27 '13 at 06:15
1

Solution

$(document).ready(function(){
    $(window).scroll(function(){
        btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
        ftrTop = $(".footer").offset().top;
        if (btnBottom > ftrTop)
            $(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
    });
});

Fiddle: http://jsfiddle.net/praveenscience/BhvMg/

You forgot to give the z-index, that prevents it from being on top!

z-index: 999;

Or if it is overlapping with the footer of your page, you can increase the co-ordinates.

bottom: 50px;

Your question is still not clear, "stop it from entering the footer". Does it overlap?

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • 1
    Thanks, but if I increase the value of `bottom` to 50 (or whatever), it always stays 50px above the bottom right corner. That is not what I want. I want to usually stay at the botoom right corner (i.e. bottom: 10px, right: 10px), but it should stay at the top of the footer when user scrolls down to the end of the page. – CookieEater Aug 27 '13 at 01:27
  • @CookieMonster A screenshot, perhaps for better understanding will be useful. :) – Praveen Kumar Purushothaman Aug 27 '13 at 01:30
  • @CookieMonster Okay, I got your issue now. Working on a solution. – Praveen Kumar Purushothaman Aug 27 '13 at 09:20
  • @CookieMonster I found a solution. Please check it out. :) Thanks. – Praveen Kumar Purushothaman Aug 27 '13 at 09:35
  • 1
    Thanks, @PraveenKumar! But unfortunately, this does not quite work. For example, if you scroll down to the end and scroll up again, the button now stays at an incorrect location. If you also increase the height of footer, it simply does not work. I thought the solution is not too complicated. I'll try to get something out by myself, too. – CookieEater Aug 27 '13 at 10:48
  • Your code has an error! If your footer is too big say 500 px in height, your code wont work. Try adding this footer -
    Copyright ME! :)
     – zookastos Jul 08 '16 at 05:54
  • 1
    I posted a solution that worked for me here - http://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer/38260165#38260165 – zookastos Jul 08 '16 at 14:43