2

I have a button on the very bottom of my website which I want to be invisible until the page is scrolled to the bottom. Once scrolled to the bottom, the button animates in (opacity/visible animate to 1)

I have skrollr installed in the site already for other elements but not sure if I can accomplish this effect with scroller.

Basically, its an transition/animation on the button with a delay. Only activated once the site has reached the bottom.

HTML

<footer>

    <div class="footer-btn"><a href="...">Miss something?</a></div>

       ...

CSS

.footer-btn a  {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 25px 30px;
  margin: 20px;
  border: 3px solid #fff;
}
user3550879
  • 3,389
  • 6
  • 33
  • 62

2 Answers2

0

You can do something like this:

Change CSS to:

.footer-btn a  {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 25px 30px;
    margin: 20px;
    border: 3px solid #fff;
}

Put this on page as javascript:

var isShown = false;

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        isShown = true;
        $('.footer-btn').fadeIn(500);
    }
});

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() < $(document).height() && isShown) {
        isShown = false;
        $('.footer-btn').fadeOut(500);
    }
})
Brian
  • 1,513
  • 2
  • 14
  • 17
  • I am using wordpress, can that go in the tag. Also, will that animate or just show up – user3550879 Jul 22 '15 at 00:21
  • Yes, it can go anywhere really - you just need to wait for DOM to be ready. That will just display the button... if you want animation, you'd have to be more specific what. Probably take a look at http://api.jquery.com/fadein/ for simple stuff. – Brian Jul 22 '15 at 00:26
  • i put it in with – user3550879 Jul 22 '15 at 00:46
  • that's starting to work great, how can it fade back to 0 when the window is scrolled back up. Right now it fades in perfect once the bottom is reached, but it stays there once loaded. (sorry if i should have included this in my posted question) – user3550879 Jul 22 '15 at 02:16
  • Updated again - for future questions, however, you really should be more focused. Asking for full solutions on SO like this is heavily frowned on. – Brian Jul 22 '15 at 02:27
  • My apologies, I didn't think of this part when I asked. Thank you for all your help – user3550879 Jul 22 '15 at 02:31
0

You are going to need javascript/jQuery. You can try using waypoint.js which makes triggering javascript events at certain points in the page easy! 

var $footerbutton = $('.footer-btn a');
var waypoint = new Waypoint({
element: document.getElementById('#waypoint'),
handler: function() {
$footerbutton.css('opcaity',1);
}
 })
Steez
  • 219
  • 5
  • 17