JQuery Animated scroll Fade In/ Fade Out issue

Question

Found this code online, but the only thing I have left to do is modify the Jquery to where it fades out when you stop scrolling, and fades back in when you start scrolling.

Also, I want my button at the very bottom right side of the screen. Here's the code. Any help will be appreciated.

HTML:

<a href="index.html" class="scrollToTop"></a>

JQuery:

<script>
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});
</script>

CSS:

.scrollToTop{
    width:100px; 
    height:130px;
    padding:5px; 
    text-align:center; 
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom:5px;
    right:5px;
    display:none;
    background: url('images/UpArrow_tab.png') no-repeat 0px 0px;
}

    .scrollToTop:hover{
    text-decoration:none;
    background: url('images/UpArrow_tab_hover.png') no-repeat 0px 0px;
}

how do modify the coding to where the button is at the VERY BOTTOM RIGHT side of the screen and the button FADE'S OUT when NOT scrolling but FADE'S IN when scrolling? — Tyler Maher, Apr 13 '15 at 16:27

Shikkediel · Answer 1 · 2015-04-12T15:15:53.900

1

Something like this should work :

http://codepen.io/anon/pen/VYJgbq

var action;

$(window).scroll(function() {

  clearTimeout(action);
  scrollEnd();
});

function scrollEnd() {

  action = setTimeout(function() {

    if ($(window).scrollTop() > 100) $('.scrollToTop').fadeIn();
    else $('.scrollToTop').fadeOut();
  }, 200);
}

And a variation where it shows a bit quicker :

http://codepen.io/anon/pen/RNzvgO

var scrollit = $('.scrollToTop'), action;

$(window).scroll(function() {

  clearTimeout(action);
  scrollEnd();

  if ($(this).scrollTop() > 100 && !scrollit.is('visible')) scrollit.fadeIn();
});

function scrollEnd() {

  action = setTimeout(function() {

    if ($(window).scrollTop() <= 100) scrollit.fadeOut();
  }, 200);
}

edited Apr 12 '15 at 15:15

answered Apr 12 '15 at 14:40

Shikkediel

4,890
15
41
70

how do modify the coding to where the button is at the VERY BOTTOM RIGHT side of the screen and the button FADE'S OUT when NOT scrolling but FADE'S IN when scrolling? – Tyler Maher Apr 13 '15 at 16:28
If the button is meant to be clickable by the user that won't work though? – Shikkediel Apr 14 '15 at 03:30

score 0 · Answer 2 · answered Apr 12 '15 at 14:37

If you want to show the scrollToTop link when window scrollTop is greater than 100, then you can use this javascript code:

<script>
$(document).ready(function(){
    var $scrollToTop=$('.scrollToTop');//for better performance
    var isScrollToTopVisible=false;

    //Useful for F5 key when page scroll is in the middle
    setTimeOut(function(){
        if($(window).scrollTop()>100)
        {
            $scrollToTop.fadeIn();
            isScrollToTopVisible=true;
        }
    },500)

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        var scrollTop=$(this).scrollTop()
        if (isScrollToTopVisible==false && scrollTop > 100) {
            $scrollToTop.fadeIn();
            isScrollToTopVisible=true;
        }
        else if (isScrollToTopVisible && scrollTop<=100) {
            $scrollToTop.fadeOut();
            isScrollToTopVisible=false;
        }
    });

    //Click event to scroll to top
    $scrollToTop.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});
</script>

Neither one works for me. I just want the button to FADE IN when its scrolling, and then to QUICKLY FADE OUT when the button's NOT scrolling. Also if you can help me with the CSS because I need the button to be at the very bottom of the right side of the screen. Any help in both of those areas will be appreciated. Thanks. — Tyler Maher, Apr 12 '15 at 19:11
@TylerMaher Your css should works fine. with position:fixed and right:0 and bottom:0 style — Bagherani, Apr 13 '15 at 04:42
Thanks. What about the JQuery code for scrolling? How can I make it to FADE IN when scrolling, and to quickly FADE OUT when NOT scrolling? How can I modify that a simpler way? — Tyler Maher, Apr 13 '15 at 21:11

JQuery Animated scroll Fade In/ Fade Out issue

2 Answers2