Back to top button

Asked

Viewed 667 times

1

I created a basic script to display/hide a return button at the top of the page:

$(document).ready(function(){
        // Add smooth scrolling to all links
        $("a").on('click', function(event) {
            // Make sure this.hash has a value before overriding default behavior
            if (this.hash !== "") {
                // Prevent default anchor click behavior
                event.preventDefault();
                // Store hash
                var hash = this.hash;
                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function(){
                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            } // End if
        });
        //Nav BG and TopBTN function
        (function scrollFn(){
            if($(document).scrollTop() >= 1){
                $("nav").css({"background-color":"rgba(0,0,0,.6)"});
                $(".up-scroll").addClass("display");
                setTimeout(function(){
                    $(".up-scroll").addClass("active");
                },100);
            };
            $(document).scroll(function(){
                if($(this).scrollTop() >= 1){
                    $("nav").css({"background-color":"rgba(0,0,0,.6)"});
                    $(".up-scroll").addClass("display");
                    setTimeout(function(){
                        $(".up-scroll").addClass("active");
                    },100);
                }else{
                    $("nav").css({"background-color":"rgba(0,0,0,0)"});
                    $(".up-scroll").removeClass("active");
                };
            });
        })();
    });
div{
   height:3000px
}
.up-scroll{
        background-color:transparent;
        border: 3px solid rgba(0,0,0,1);
        color:#000;
        padding:6px;
        width:40px;
        height:40px;
        border-radius:50%;
        position:fixed;
        bottom:20px;
        right:20px;
        z-index:50;
        text-align:center;
        opacity:0;
        display:none;
        transition:opacity .4s ease-in-out;
    }
    .up-scroll.display{
        display:block;
    }
    .up-scroll.display.active{
        opacity:1;
    }
<div>

</div>
<a href="#home" class="up-scroll"><span class="sr-only">Voltar ao topo</span><i class="fas fa-arrow-up"></i></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In this case, in this snippet the button will not work, when clicking, however, my problem is in making the button be hidden when the user returns to position 0 in the scroll of the page.

  • No error pointed on console
javascript jquery css

  • not possible duplicate, if you read the question you will understand

1 answer

1


The problem is in this setTimeout that I commented on:

$(document).scroll(function(){
    if($(this).scrollTop() >= 1){
        $("nav").css({"background-color":"rgba(0,0,0,.6)"});
        $(".up-scroll").addClass("display");
//                    setTimeout(function(){
            $(".up-scroll").addClass("active");
//                    },100);
    }else{
        $("nav").css({"background-color":"rgba(0,0,0,0)"});
        $(".up-scroll").removeClass("active");
    };
});

He’s readjusting his class .active when the scroll reaches 0, because it has a delay of 100ms when the scroll is still equal or greater than 1. This 100ms time is a high value in relation to the time the scroll passes from 1 to 0. You can solve by decreasing the value to 10, which is enough for the timer not to reinsert the class in the element.

Example:

$(document).ready(function(){
        // Add smooth scrolling to all links
        $("a").on('click', function(event) {
            // Make sure this.hash has a value before overriding default behavior
            if (this.hash !== "") {
                // Prevent default anchor click behavior
                event.preventDefault();
                // Store hash
                var hash = this.hash;
                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function(){
                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            } // End if
        });
        //Nav BG and TopBTN function
        (function scrollFn(){
            if($(document).scrollTop() >= 1){
                $("nav").css({"background-color":"rgba(0,0,0,.6)"});
                $(".up-scroll").addClass("display");
                setTimeout(function(){
                    $(".up-scroll").addClass("active");
                },100);
            };
            $(document).scroll(function(){
                if($(this).scrollTop() >= 1){
                    $("nav").css({"background-color":"rgba(0,0,0,.6)"});
                    $(".up-scroll").addClass("display");
                    setTimeout(function(){
                        $(".up-scroll").addClass("active");
                    },10);
                }else{
                    $("nav").css({"background-color":"rgba(0,0,0,0)"});
                    $(".up-scroll").removeClass("active");
                };
            });
        })();
    });
body{
   margin: 0;
}
div{
   height:3000px
}
.up-scroll{
        background-color:transparent;
        border: 3px solid rgba(0,0,0,1);
        color:#000;
        padding:6px;
        width:40px;
        height:40px;
        border-radius:50%;
        position:fixed;
        bottom:20px;
        right:20px;
        z-index:50;
        text-align:center;
        opacity:0;
        display:none;
        transition:opacity .4s ease-in-out;
    }
    .up-scroll.display{
        display:block;
    }
    .up-scroll.display.active{
        opacity:1;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
home
</div>
<a href="#home" class="up-scroll"><span class="sr-only">Voltar ao topo</span><i class="fas fa-arrow-up"></i></a>

Using fadein, fadeOut

$(document).ready(function(){
     // Add smooth scrolling to all links
     $("a").on('click', function(event) {
         // Make sure this.hash has a value before overriding default behavior
         if (this.hash !== "") {
             // Prevent default anchor click behavior
             event.preventDefault();
             // Store hash
             var hash = this.hash;
             // Using jQuery's animate() method to add smooth page scroll
             // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
             $('html, body').animate({
                 scrollTop: $(hash).offset().top
             }, 800, function(){
                 // Add hash (#) to URL when done scrolling (default click behavior)
                 window.location.hash = hash;
             });
         } // End if
     });
     //Nav BG and TopBTN function
     (function scrollFn(){
         if($(document).scrollTop() >= 1){
             $("nav").css({"background-color":"rgba(0,0,0,.6)"});
             $(".up-scroll").fadeIn("slow");
         };
         $(document).scroll(function(){
             if($(this).scrollTop() >= 1){
                 $("nav").css({"background-color":"rgba(0,0,0,.6)"});
                 $(".up-scroll").fadeIn("slow");
             }else{
                 $("nav").css({"background-color":"rgba(0,0,0,0)"});
                 $(".up-scroll").fadeOut("slow");
             };
         });
     })();
 });
body{
   margin: 0;
}
div{
   height:3000px
}
.up-scroll{
        background-color:transparent;
        border: 3px solid rgba(0,0,0,1);
        color:#000;
        padding:6px;
        width:40px;
        height:40px;
        border-radius:50%;
        position:fixed;
        bottom:20px;
        right:20px;
        z-index:50;
        text-align:center;
        /*opacity:0;*/
        display:none;
        /*transition:opacity .4s ease-in-out;*/
    }
/*    .up-scroll.display{
        display:block;
    }
    .up-scroll.display.active{
        opacity:1;
    }*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home">
home
</div>
<a href="#home" class="up-scroll"><span class="sr-only">Voltar ao topo</span><i class="fas fa-arrow-up"></i></a>

  • 1

    Nothing like someone who understands JS, until I removed my humble response haha

  • There is a problem, so had placed the setTimeout, the first time the user scroll down, it does not display the opacity transition

  • the problem of opacity, as he had informed

  • 1

    @Murilogambôa In the example I posted the opacity is working normal. I added another way using fadeIn and fadeOut which I think is even better, because everything is inside jQuery without calling CSS classes, which you can even delete from code.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.