Search code examples
sticky-footer

Create a div that appears after scroll, stays permanently at bottom of page

I am trying to create a 'back to top' image, it needs to stick to the bottom right corner of the page.

I have created the div with the image but I do not know what is the best way to make it permanently stay at the bottom of the page. Is it best to use absolute positioning?

Also, I want the div to only appear when the user has scrolled past a certain point, and to fade in (or something similar?)

I have looked online but can't find anything that does what I want. I tried simply getting the div to stick to the bottom but the tutorials I have been using show how to create footers, rather than just one small graphic, so it doesn't work as well.

What are the best practices for this? Any help appreciated!

Solution

  • How about this:

    http://jsfiddle.net/uRN64/1

    HTML

    <div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>

<div style='height:1200px; background-color:orange'>Try Scrolling me</div>​

    JS

    $(function(){
    $(window).scroll(function() {              
      $('#log').toggle($(document).scrollTop() > 100);
    });
})
​

    To fade:

    Change: $('#log').toggle($(document).scrollTop() > 100); to

    $(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();