Question

I want to use the scroll function to make a hidden “back to top” button appear whenever someone scrolls.

$(window).scroll(function(){$("#top_btn").css("visibility", "visible");});

I also have buttons that automatically scroll the page to named anchors. The “back to top” button is one of them. It scrolls the page back to top. I will also make it disappear when it is clicked, since it is no longer needed once you are at the top of the page.

The problem is, the scroll function makes the “back to top” button appear, even if it is scrolling to the top. I want to make it disappear if it is clicked, and stay hidden.

I guess my question is how can I nullify the original scroll function upon clicking the back to top button?

Some people have suggested that I use the scrollTop function to hide the “back to top” button, but there are just too many cross-browser issues with that.

Basically is there some code to nullify the function?

Sorry for the newbie question, but I’m new to jquery.

Answer 1

I feel like you’re thinking the vanilla js scrollTop might have cross-browser issues, but I think the jQuery one should be okay. Correct me if I’m wrong.

$(window).scroll(function() {
    if ($(window).scrollTop() === 0) {
        $("#top_btn").css("visibility", "visible");
    }
    else {
        $("#top_btn").css("visibility", "hidden");
    }
);