How to not show back-to-top button when refresh the page?

Question

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 150) {
            $('.back-to-top').fadeIn(500);
        } else {
            $('.back-to-top').fadeOut(500);
        }
    });
    $('.back-to-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 500);
    })
});

Above is javascript code for my back-to-top button and I want it show out only when I scroll the page.

However, I found out that this button will show out in the beginning when I refresh the page and hide again when scroll < 150 and show again when scroll > 150.

What can I do to hide it in the beginning and only show out when scroll > 150?

Answer 1

use below code. hide button on page load button will display as per your condition 150 >

$(document).ready(function() {

   $('.back-to-top').hide();

   // your code here 

or using css

.back-to-top{
   display:none;
}

Answer 2

<style>
.back-to-top{
   display:none;
}
</style>

Answer 3

将此添加到您的CSS中：

.back-to-top {opacity:0;}