javascript - color - Botón adhesivo "volver arriba" que se muestra en la carga de la página, antes de desplazarse hacia abajo

jquery css height animate

Question

Seguí un tutorial para obtener un botón adhesivo "volver arriba" que aparecería una vez que te desplazas hacia abajo. Por alguna razón, se muestra cuando estás en la parte superior de la página después de que la página se carga por primera vez. Si se desplaza hacia abajo, luego hacia atrás, desaparece (como debería). Pero inicialmente no se está comportando correctamente. ¿Alguna idea?

Aquí está la página en vivo en la que la estoy usando, puedes verla en la esquina inferior derecha aquí: http://willryan.us

HTML

<a href="#" class="go-top" style="display: inline;">Back to top</a>


<script>
        $(document).ready(function() {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $(''.go-top'').fadeIn(500);
                } else {
                    $(''.go-top'').fadeOut(300);
                }
            });

            // Animate the scroll to top
            $(''.go-top'').click(function(event) {
                event.preventDefault();

                $(''html, body'').animate({scrollTop: 0}, 300);
            })
        });
    </script>

CSS

.go-top {
    position: fixed;
    bottom: 0.75em;
    right: 0.5em;
    text-decoration: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    padding: 10px;
    display: none;
    margin: 0;
}

.go-top:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
}

Answer 1

Cambie su HTML de

<a href="#" class="go-top" style="display: inline;">Back to top</a>

a

<a href="#" class="go-top" style="display: none;">Back to top</a>

Esto inicialmente ocultará su botón hasta que se desplace.

Answer 2

Lo hice como usuario ntgCleaner dijo y cambiar la "pantalla: en línea" en el html para "mostrar: ninguno" y parece funcionar. ¡Gracias!

Answer 3

Se muestra porque aún no has disparado un evento de desplazamiento para hacer que esa lógica se ejecute para ocultarlo / mostrarlo

<script>
    $(document).ready(function() {
        function checkPosition() {
            if ($(this).scrollTop() > 200) {
                $(''.go-top'').fadeIn(500);
            } else {
                $(''.go-top'').fadeOut(300);
            }
        }
        // Show or hide the sticky footer button
        $(window).scroll(checkPosition);

        // Animate the scroll to top
        $(''.go-top'').click(function(event) {
            event.preventDefault();

            $(''html, body'').animate({scrollTop: 0}, 300);
        })

        checkPosition();
    });
</script>

Este nuevo refactor activará checkPosition al menos una vez en la carga de la página, para asegurarse de que el botón esté desvanecido. Una solución alternativa sería establecer la display: none; en el CSS en el elemento, por lo que está oculto de forma predeterminada, luego solo se muestra mediante el javascript posterior